I am using Jquery's slideToggle() to open and close my main menu. The slideToggle() works perfectly.
What I need to do is get the slideToggle to close a div when a different one is opened. I have tried so many different ways to achieve this but I haven't been able to.
I found the below suggestion on stackoverflow:
uses the id of the tag to trigger slideToggle()
What I found with that suggestion is that everytime I click on each menu item the page jumps to the top (like its being reloaded) and I didnt like that.
I also found this little bit of code:
uses the id of the of the div
I tried to add a third box to that fiddle to see what happened but it didn't work in the same way the first 2 boxes did and I couldn't figure out why.
This is what my HTML looks like:
<div class="menu-item-1">
<a href="#">Recovery</a>
</div>
<div class="menu-item-2">
<a href="#">Forensics</a>
</div>
<div class="menu-item-3">
<a href="#">Erasure</a>
</div>
<div class="menu-item-4">
<a href="#">Training</a>
</div>
<div class="menu-item-5">
<a href="#">Products</a>
</div>
And this is what my javascript looks like:
$( ".menu-item-1" ).click(function() {
$( ".recovery-bg" ).slideToggle("fast", "easeOutBack");
});
$( ".menu-item-2" ).click(function() {
$( ".forensic-bg" ).slideToggle();
});
$( ".menu-item-3" ).click(function() {
$( ".erasure-bg" ).slideToggle();
});
$( ".menu-item-4" ).click(function() {
$( ".training-bg" ).slideToggle();
});
$( ".menu-item-5" ).click(function() {
$( ".product-bg" ).slideToggle();
});
Here is the HTML code for the divs that slideToggle():
<!--Expanding Recovery Menu-->
<div class="recovery-bg arrow_box_recovery toggle hidden-phone">
<div class="container expand">
<div class="row">
<div class="span2 offset1">
<div class="menu-item">
<a href=""><p>Data <br/> Recovery</p></a>
</div>
</div>
<div class="span2 offset1">
<div class="menu-item">
<a href=""><p>Raid <br/> Recovery</p></a>
</div>
</div>
<div class="span2 offset1">
<div class="menu-item">
<a href=""><p>Forensic <br/> Data Recovery</p></a>
</div>
</div>
<div class="span2 offset1">
<div class="menu-item">
<a href=""><p>Tape <br/> Recovery</p></a>
</div>
</div>
</div>
</div>
</div>
<!--/Expanding Recovery Menu-->
Ive gone through a couple of other tutorials aswell but in them I noticed that some people dont have href
in their tag and I want to avoid stuff like that if I can.
If anyone can help that would be great.