... I want to ask about use of effects, so I have a few buttons and each button if pressed will display the HTML element <div> and I've made the code
$(document).ready(function(){
$('#label').click(function(){
$('#menu1').toggle("speed");
});
$('#label2').click(function(){
$('#menu2').fadeToggle("speed");
});
$('#label3').click(function(){
$('#menu3').slideToggle("speed");
});
});
I would like if one of the menu is clicked element from another menu closed. I ask for guidance and what's the solution?
Best How To :
Give the items a common class and call
$('.menu-item:visible').hide();
Basic example:
$(".tabs").on("click", "a", function () {
var anchor = $(this),
id = anchor.attr("href"),
menuToToggle = $(id);
anchor.closest("li").toggleClass("active", !menuToToggle.is(":visible")).siblings(".active").removeClass("active");
$(".menu-item:visible").not(menuToToggle).hide();
menuToToggle.fadeToggle();
});
.menu-item { display: none; }
li.active{ background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs">
<li><a href="#menu1">One</a></li>
<li><a href="#menu2">Two</a></li>
<li><a href="#menu3">Three</a></li>
</ul>
<div id="menu1" class="menu-item">Menu 1 item</div>
<div id="menu2" class="menu-item">Menu 2 item</div>
<div id="menu3" class="menu-item">Menu 3 item</div>
