We Keep Coding

Show hide Div based on toggle Switch

I'm trying to make a toggle switch work, which will show/hide classes based on if it is checked or unchecked. By default i want to show "pay annually" so it will display the annual price, also a text blub further down the page. If i click "pay monthly" it will display the monthly price, and a monthly text blurb further down the page.
I tried to follow some solution, but at the moment all are showing, and nothing toggles. How can i fix this?
link to codepen
function showHide(e) {
const el = e.target;
if (el.checked) {
el.dataset.checked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'block');
el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'none' );
} else {
el.dataset.checked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'none' );
el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'block');
}
}

Using jQuery :
$(document).ready(function() {
var checkBoxes = $("input[name='toggle']");
toggle();
$("#toggle").click(function() {
toggle();
});
function toggle() {
if (checkBoxes.prop("checked")) {
$('#coreMonthlyText,#coreMonthlyPrice').show('slow');
$('#coreAnnuallyText,#coreAnnuallyPrice').hide('slow');
} else {
$('#coreMonthlyText,#coreMonthlyPrice').hide('slow');
$('#coreAnnuallyText,#coreAnnuallyPrice').show('slow');
}
}
});
.pricing-box {
background: red;
padding: 25px
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.toggle-switch {
cursor: pointer;
background-color: gray;
display: inline-block;
border: 0;
padding-left: 0;
padding-right: 0;
}
.toggle-switch input {
display: none;
}
.toggle-switch,
.toggle-switch span {
border-radius: 35px;
border-style: solid;
border-color: transparent;
padding-top: .75rem;
padding-bottom: .75rem;
}
.toggle-switch span {
border-width: 2px;
padding-left: .75rem;
padding-right: .75rem;
}
.toggle-switch input:checked+span+span,
.toggle-switch input+span {
border-color: #444;
background-color: white;
}
.toggle-switch input+span+span,
.toggle-switch input:checked+span {
background-color: transparent;
border-color: transparent;
}
#coreMonthlyText,
#coreMonthlyPrice,
#coreAnnuallyText,
#coreAnnuallyPrice {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-box">
<div class="row">
<div class="column">
<div class="core">
<h2>Core</h2>
</div>
</div>
<div class="column">
<div id="coreAnnuallyPrice" class="coreAnnuallyPrice">
$2,399/yr<br /> Normally $3,588/yr
</div>
<div id="coreMonthlyPrice" class="coreMonthlyPrice">
$299/pm<br /> first 2 months free
</div>
</div>
</div>
<label for="toggle" class="toggle-switch">
<input class="toggle-button" id="toggle" type="checkbox" name="toggle" data-checked="coreAnnuallyPrice,coreAnnuallyText" data-not-checked="coreMonthlyPrice,coreMonthlyText">
<span>pay annually</span>
<span>pay monthly</span>
</label>
</div>
<p id="coreAnnuallyText" class="center_text big-text coreAnnuallyText">this is a annual text blurb</p>
<p id="coreMonthlyText" class="center_text big-text coreMonthlyText">this is a monthly text blurb.</p>

How to change img content after selecting a drop-down

I would like to change the content of my image after selecting the drop-down list. But after choosing the active pseudo-class it's blinking all the time.
I've tried many pseudo-classes so far but none of them worked.
Could anyone tell me what I did wrong?
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
Here is the live
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 100px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#checkboxes {
display: none;
border: 1px gray solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: yellow;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: transparent;
width: 100px !important;
}
.select-container {
display: flex;
width: 100px;
background-color: gray;
}
.drop-arrow {
content: url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");
}
.selectBox:active .drop-arrow {
content: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png");
}
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<div class="select-container">
<select>
<option>Select an option</option>
</select>
<img class="drop-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one">First checkbox</label>
<label for="two"><input type="checkbox" id="two">Second checkbox</label>
<label for="three"><input type="checkbox" id="three">Three checkbox</label>
</div>
</div>

If I get the thing that you wanna do, I this case I dont would use pseudo elements, I rather use classes, and you can toggle that clase using jquery or javascript, you can create a class called "active" and then when you click in the drop down you can change the image (you need to use css and putting the desired image as a background property) It would work

friend the problem is with selectBox:active .drop-arrow it only works when clic is pressed for that you can do like the code bellow; and another problem I saw you must to add flex-grow, flex-shrink, flex-basis to childs of flex container in this case .select-container, This code can be inprove with jquery toogleclass() check it
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
$(".select-container div").removeClass("drop-arrow");
$(".select-container div").addClass("drop-arrow2");
expanded = true;
} else {
$(".select-container div").removeClass("drop-arrow2");
$(".select-container div").addClass("drop-arrow");
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 140px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#checkboxes {
display: none;
border: 1px gray solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: yellow;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: transparent;
flex:1 0 auto;
}
.select-container {
display: flex;
background-color: gray;
width:auto;
}
.drop-arrow {
flex:1 0 auto;
display:block;
width: 50px;
height: 35px;
background-image:url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");
background-repeat: no-repeat;
}
.drop-arrow2 {
content: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<div class="select-container">
<select>
<option>Select an option</option>
</select>
<div class="drop-arrow" alt=""></div>
</div>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one">First checkbox</label>
<label for="two"><input type="checkbox" id="two">Second checkbox</label>
<label for="three"><input type="checkbox" id="three">Three checkbox</label>
</div>
</div>
check my pen https://codepen.io/Qleoz12/pen/QzPQvp

jQuery btn to close div if made active

I need the .menu button to close the .slides container if it was opened by one of the [name=toggler] radio buttons.
So if the state of the .slide is show and the .menu button is clicked, hide .slides.
.slides can only be opened by the [name=toggler] radio buttons, but are made hidden by clicking the .menu button.
$('.menu-btn').click(function() {
$(".menu").toggle("slide");
});
$(function() {
$("[name=toggler]").click(function() {
$('.slide').hide();
$("#blk-" + $(this).val()).show();
});
});
.flex,
.btn-wrap {
display: flex;
}
.menu,
.slide {
display: none;
}
.btn,
.menu-btn {
padding: 20px;
border: 1px solid silver;
cursor: pointer
}
.slide {
height: 50px;
width: 50px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
Menu
<div class="menu">
<div class="btn-wrap">
<label class="btn"><input type="radio" name="toggler" value="1"/>Slide 1</label>
<label class="btn"><input type="radio" name="toggler" value="2"/>Slide 2</label>
</div>
</div>
</div>
<div class="slides">
<div class="slide" id="blk-1">
Slide 1
</div>
<div class="slide" id="blk-2">
Slide 2
</div>
</div>

Just have to do a check on .menu-btn click, whether the .slide div is visible or not. If visible hide it also uncheck the radio button.
Here is the codepen: https://codepen.io/johnsackson/pen/NMNmyb
$(".menu-btn").click(function() {
$(".menu").toggle("slide");
if($(".slide").is(":visible")) {
$(".slide").hide();
$("[name=toggler]").prop("checked", false);
}
});
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
$("#blk-" + $(this).val()).show();
});
});
Hope this helps.

CSS check box, how to make an item unchecked only if another one is checked

I am trying to create some sort of slide show based on CSS Checkbox. So corresponding data is visible when its button is pressed.
But the issue is the data disappear if the button is pressed again. I want to make it in a way what once a button is pressed and its data is visible, it only disappear when another button is pressed. So it won't be on and off but on unless another button is pressed.
Here is the DEMO
$.fn.MP = function(options) {
var settings = $.extend({
// These are the defaults
text: ""
}, options);
$(this).on("click tap", "input", function() {
$(this).parent().siblings().find("input").prop("checked", false);
});
};
// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
var $panel = $(el);
var panelId = $panel.attr('id');
var $panelBottom = $('div.panelBottom', $panel);
$('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
var $input = $(elInput);
var inputId = panelId + '-box-' + indexInput;
$input.attr('id', inputId);
$('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId);
});
});
$("#item1").MP({});
$("#item2").MP({});
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
.panelTop > div div {
display: none;
}
.panelTop > div input[type="checkbox"]:checked ~ div {
display: block;
}
.panel {
width: 400px;
height: 100px;
border: 1px solid black;
}
.panel > .panelTop {
width: 100%;
height: 49px;
border-bottom: 1px dashed black;
}
.panel > .panelBottom {
width: 100%;
height: 50px;
}
.panel > .panelTop > div div {
width: 24px;
height: 24px;
float: right;
margin: 0px 9px 0 0;
border: 1px dashed black;
}
.panel > .panelBottom > div {
width: 32px;
height: 32px;
float: right;
margin: 9px 9px 0 0;
border: 1px solid black;
text-align: center;
font-size: 22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="checkbox" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="checkbox">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="checkbox">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
<div class="panel" id="item2">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="checkbox" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="checkbox">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="checkbox">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
Now in the above example the data corresponding to button 1 is visible. if you press the same button again, its data disappears. I want it to work in a way that the button only shows data and data only disappears when a different button is pressed.
Any idea to achieve that?

You can just use input[type=radio] instead.
$.fn.MP = function(options) {
var settings = $.extend({
// These are the defaults
text: ""
}, options);
$(this).on("click tap", "input", function() {
$(this).parent().siblings().find("input").prop("checked", false);
});
};
// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
var $panel = $(el);
var panelId = $panel.attr('id');
var $panelBottom = $('div.panelBottom', $panel);
$('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
var $input = $(elInput);
var inputId = panelId + '-box-' + indexInput;
$input.attr('id', inputId);
$('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId);
});
});
$("#item1").MP({});
$("#item2").MP({});
input[type="radio"] {
position: absolute;
opacity: 0;
}
.panelTop > div div {
display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
display: block;
}
.panel {
width: 400px;
height: 100px;
border: 1px solid black;
}
.panel > .panelTop {
width: 100%;
height: 49px;
border-bottom: 1px dashed black;
}
.panel > .panelBottom {
width: 100%;
height: 50px;
}
.panel > .panelTop > div div {
width: 24px;
height: 24px;
float: right;
margin: 0px 9px 0 0;
border: 1px dashed black;
}
.panel > .panelBottom > div {
width: 32px;
height: 32px;
float: right;
margin: 9px 9px 0 0;
border: 1px solid black;
text-align: center;
font-size: 22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
<div class="panel" id="item2">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
As a side note, you can take advantage of the CSS counter() function here. (Everything is declared at the bottom of the CSS for clarity).
$.fn.MP = function(options) {
var settings = $.extend({
// These are the defaults
text: ""
}, options);
$(this).on("click tap", "input", function() {
$(this).parent().siblings().find("input").prop("checked", false);
});
};
// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
var $panel = $(el);
var panelId = $panel.attr('id');
var $panelBottom = $('div.panelBottom', $panel);
$('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
var $input = $(elInput);
var inputId = panelId + '-box-' + indexInput;
$input.attr('id', inputId);
$('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId);
});
});
$("#item1").MP({});
$("#item2").MP({});
input[type="radio"] {
position: absolute;
opacity: 0;
}
.panelTop > div div {
display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
display: block;
}
.panel {
width: 400px;
height: 100px;
border: 1px solid black;
}
.panel > .panelTop {
width: 100%;
height: 49px;
border-bottom: 1px dashed black;
}
.panel > .panelBottom {
width: 100%;
height: 50px;
}
.panel > .panelTop > div div {
width: 24px;
height: 24px;
float: right;
margin: 0px 9px 0 0;
border: 1px dashed black;
}
.panel > .panelBottom > div {
width: 32px;
height: 32px;
float: right;
margin: 9px 9px 0 0;
border: 1px solid black;
text-align: center;
font-size: 22px;
}
.panelTop {
counter-reset: my-counter;
}
.panelTop > div {
counter-increment: my-counter;
counter-reset: sub-counter;
}
.panelTop > div > div {
counter-increment: sub-counter;
}
.panelTop > div > div::before {
content: counter(my-counter)"." counter(sub-counter)" ";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div></div>
<div></div>
<div></div>
</div>
<div>
<input type="radio">
<div></div>
<div></div>
<div></div>
</div>
<div>
<input type="radio">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
<div class="panel" id="item2">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div></div>
<div></div>
<div></div>
</div>
<div>
<input type="radio">
<div></div>
<div></div>
<div></div>
</div>
<div>
<input type="radio">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
EDIT:
To take full advantage of the radio group, and for this to work without:
$(this).on("click tap", "input", function() {
$(this).parent().siblings().find("input").prop("checked", false);
});
You have to give the same value to the attribute name on each radio in the input group.
$.fn.MP = function(options) {
var settings = $.extend({
// These are the defaults
text: ""
}, options);
};
// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
var $panel = $(el);
var panelId = $panel.attr('id');
var $panelBottom = $('div.panelBottom', $panel);
$('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
var $input = $(elInput);
var inputId = panelId + '-box-' + indexInput;
$input.attr('id', inputId);
$('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId);
});
});
$("#item1").MP({});
$("#item2").MP({});
input[type="radio"] {
position: absolute;
opacity: 0;
}
.panelTop > div div {
display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
display: block;
}
.panel {
width: 400px;
height: 100px;
border: 1px solid black;
}
.panel > .panelTop {
width: 100%;
height: 49px;
border-bottom: 1px dashed black;
}
.panel > .panelBottom {
width: 100%;
height: 50px;
}
.panel > .panelTop > div div {
width: 24px;
height: 24px;
float: right;
margin: 0px 9px 0 0;
border: 1px dashed black;
}
.panel > .panelBottom > div {
width: 32px;
height: 32px;
float: right;
margin: 9px 9px 0 0;
border: 1px solid black;
text-align: center;
font-size: 22px;
}
.panelTop {
counter-reset: my-counter;
}
.panelTop > div {
counter-increment: my-counter;
counter-reset: sub-counter;
}
.panelTop > div > div {
counter-increment: sub-counter;
}
.panelTop > div > div::before {
content: counter(my-counter)"." counter(sub-counter)" ";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" name="item1" checked>
<div></div>
<div></div>
<div></div>
</div>
<div>
<input type="radio" name="item1">
<div></div>
<div></div>
<div></div>
</div>
<div>
<input type="radio" name="item1">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
<div class="panel" id="item2">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" name="item2" checked>
<div></div>
<div></div>
<div></div>
</div>
<div>
<input type="radio" name="item2">
<div></div>
<div></div>
<div></div>
</div>
<div>
<input type="radio" name="item2">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>

I just want to create simple menu links inside some divs?

I just want to create simple menu links inside some animated divs , the problems is the div disapper if the mous move over the (li) inside it but if the div empty it works fine ?
first thing just come to my mind is i have to prevent event propagation , so i added this to the elements inside the sum menu ( the (li)) but is still face the same problem.
function hidemneu() {
$('#submenu1').hide('fold', 'slow');
$('#submenu2').hide('fold', 'slow');
$('#submenu3').hide('fold', 'slow');
$('#submenu4').hide('fold', 'slow');
}
$('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu);
$('#btn1').on('mouseover', function() {
hidemneu();
$('#submenu1').offset({
left: $('#btn1').offset().left
});
$('#submenu1').show("fold");
});
$('#btn2').on('mouseover', function() {
hidemneu();
$('#submenu2').offset({
left: $('#btn2').offset().left
});
$('#submenu2').show("fold");
});
$('#btn3').on('mouseover', function() {
hidemneu();
$('#submenu3').offset({
left: $('#btn3').offset().left
});
$('#submenu3').show("fold");
});
$('#btn4').on('mouseover', function() {
hidemneu();
$('#submenu4').offset({
left: $('#btn4').offset().left
});
$('#submenu4').show("fold");
});
$("a").on('mouseover', function(event) {
event.stopPropagation();
});
$("li").on('mouseover', function(event) {
event.stopPropagation();
});
$("ul").on('mouseover', function(event) {
event.stopPropagation();
});
#btn1,
#btn2,
#btn3,
#btn4 {
display: inline-block;
background-color: #ff8d73;
width: 100px;
outline: 1px dashed #000000;
padding-right: 30px;
}
#menu-wrapper {
width: 100%;
background-color: #b7dcff;
text-align: center;
}
#submenu1,
#submenu2,
#submenu3,
#submenu4 {
width: 300px;
height: 200px;
outline: 1px dashed #000000;
float: left;
left: 0;
position: absolute;
display: none;
}
#submenu1 {
background-color: #f00700
}
#submenu2 {
background-color: #a6baf0
}
#submenu3 {
background-color: #7af044
}
#submenu4 {
background-color: #f0dc35
}
#sub_wrapper:after {
clear: both;
}
li,
a {
outline: 1px dashed #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="menu-wrapper">
<div id='btn1'>button 1</div>
<div id='btn2'>button 2</div>
<div id='btn3'>button 3</div>
<div id='btn4'>button 4</div>
</div>
<div id="sub_wrapper">
<div id="submenu1">
<ul>
<li>option 1</li>
<li>oprion 2</li>
</ul>
</div>
<div id="submenu2">
clcik me 1
</div>
<div id="submenu3"></div>
<div id="submenu4"></div>
</div>

Changing line 8 of the javascript seems to do the trick:
from:
$('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu);
to
$('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu);
function hidemneu() {
$('#submenu1').hide('fold', 'slow');
$('#submenu2').hide('fold', 'slow');
$('#submenu3').hide('fold', 'slow');
$('#submenu4').hide('fold', 'slow');
}
$('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu);
$('#btn1').on('mouseover', function() {
hidemneu();
$('#submenu1').offset({
left: $('#btn1').offset().left
});
$('#submenu1').show("fold");
});
$('#btn2').on('mouseover', function() {
hidemneu();
$('#submenu2').offset({
left: $('#btn2').offset().left
});
$('#submenu2').show("fold");
});
$('#btn3').on('mouseover', function() {
hidemneu();
$('#submenu3').offset({
left: $('#btn3').offset().left
});
$('#submenu3').show("fold");
});
$('#btn4').on('mouseover', function() {
hidemneu();
$('#submenu4').offset({
left: $('#btn4').offset().left
});
$('#submenu4').show("fold");
});
$("a").on('mouseover', function(event) {
event.stopPropagation();
});
$("li").on('mouseover', function(event) {
event.stopPropagation();
});
$("ul").on('mouseover', function(event) {
event.stopPropagation();
});
#btn1,
#btn2,
#btn3,
#btn4 {
display: inline-block;
background-color: #ff8d73;
width: 100px;
outline: 1px dashed #000000;
padding-right: 30px;
}
#menu-wrapper {
width: 100%;
background-color: #b7dcff;
text-align: center;
}
#submenu1,
#submenu2,
#submenu3,
#submenu4 {
width: 300px;
height: 200px;
outline: 1px dashed #000000;
float: left;
left: 0;
position: absolute;
display: none;
}
#submenu1 {
background-color: #f00700
}
#submenu2 {
background-color: #a6baf0
}
#submenu3 {
background-color: #7af044
}
#submenu4 {
background-color: #f0dc35
}
#sub_wrapper:after {
clear: both;
}
li,
a {
outline: 1px dashed #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="menu-wrapper">
<div id='btn1'>button 1</div>
<div id='btn2'>button 2</div>
<div id='btn3'>button 3</div>
<div id='btn4'>button 4</div>
</div>
<div id="sub_wrapper">
<div id="submenu1">
<ul>
<li>option 1</li>
<li>oprion 2</li>
</ul>
</div>
<div id="submenu2">
clcik me 1
</div>
<div id="submenu3"></div>
<div id="submenu4"></div>
</div>