Hide- Show - Toggle problem - maybee callback funct.?
Hello!
I have this structure with jquery.
-
$(document).ready(function() {
$('div[class*="menu"]').hide(); // first of all, hide all DIV when load
$('a#menu1_link').click( function() {
$('div[class*="menu"]').hide(); // hide if one of them already shown
$('div.menu1').show('slow');
});
$('a#menu2_link').click( function() {
$('div[class*="menu"]').hide(); // hide if one of them already shown
$('div.menu2').show('slow');
});
$('a#menu3_link').click( function() {
$('div[class*="menu"]').hide(); // hide if one of them already shown
$('div.menu3').show('slow');
});
});
-
<div id="submenu"><a href="#" id="menu1_link"> MENU1</a> | <a href="#" id="menu2_link">MENU2</a> | <a href="#" id="menu3_link">MENU3 | </a></div>
<div id="container">
<div class="menu1">
samplesamplesamplesample1
</div>
<div class="menu2">
samplesamplesamplesample2
</div>
<div class="menu3">
samplesamplesamplesample3
</div>
.
.
.
</div>
When the page is load, all DIV on this page is HIDE. When i click between menus then the current div is open (SHOW), but before the others hide (if already open some).
This code is work well, till im patient, and wait to HIDE before i click other menu. If i click too fast between menus then somethimes the HIDE function can't finish before the SHOW funciton and so more then one DIV is open in same time.
What do you suggest? How can i delay the SHOW function till the other DIV is hide?
Thank you