DinhTv DinhTv - 4 months ago 28
HTML Question

javascript multi click show hide

I have user code to show/hide meu



$('.dcd_menu').click(function(e){
e.preventDefault();
$('.dcdt_menu').slideToggle();
$(this).toggleClass('open');
});

$('.dcd_menu1').click(function(e){
e.preventDefault();
$('.dcdt_menu1').slideToggle();
$(this).toggleClass('open');
});

.dcd_menu { display: block; position: fixed; top: 0; right: 0; z-index: 9999}
.dcd_menu:hover { cursor: pointer; }
.dcd_menu.open {background: red}

.dcd_menu1 { display: block; position: fixed; top: 0; left: 0; z-index: 9999}
.dcd_menu1:hover { cursor: pointer; }
.dcd_menu1.open {background: red}

.dcdt_menu {background: green; display: none;} .dcdt_menu1 {background: red; display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="dcd_menu" href="#">
Menu
</a>
<div class="dcdt_menu">
Click show menu
</div>

<a class="dcd_menu1" href="#">
Menu 1
</a>
<div class="dcdt_menu1">
Click show menu 1
</div>





Thal all ok but when i click menu 1 (not close menu 1) and click menu 2 is double 2 menu is show (open.)

How to when click menu 1 => Menu 2(open) to close. or click menu 2 => Menu 1(open) to close.

Any idea for helf me. Thanks for any support

Answer

Use the jQuery slideUp function whenever the menu is clicked for the other menu content on your page.

This will make the menu content slide up to make it look like it is hiding.

$('.dcd_menu').click(function(e){
e.preventDefault();
$(".dcdt_menu1").slideUp().prev().removeClass("open");

$('.dcdt_menu').slideToggle();
$(this).toggleClass('open');
});

$('.dcd_menu1').click(function(e){
e.preventDefault();
$(".dcdt_menu").slideUp().prev().removeClass("open");
$('.dcdt_menu1').slideToggle();
$(this).toggleClass('open');
});
.dcd_menu { display: block; position: fixed; top: 0; right: 0; z-index: 9999}
.dcd_menu:hover { cursor: pointer; }
.dcd_menu.open {background: red}

.dcd_menu1 { display: block; position: fixed; top: 0; left: 0; z-index: 9999}
.dcd_menu1:hover { cursor: pointer; }
.dcd_menu1.open {background: red}

.dcdt_menu, .dcdt_menu1 {background: green; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="dcd_menu" href="#">
Menu
</a>
<div class="dcdt_menu">
  Click show menu
</div>

<a class="dcd_menu1" href="#">
Menu 1
</a>
<div class="dcdt_menu1">
  Click show menu 1
</div>