Opening/Closing Multiple Divs with JQuery slideToggle()

Question

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.

Answer 1

I'll make some minor markup changes like

<div class="menu-item menu-item-1" data-target=".recovery-bg">
    <a href="#">Recovery</a>
</div>
<div class="menu-item menu-item-2" data-target=".forensic-bg">
    <a href="#">Forensics</a>
</div>
<div class="menu-item menu-item-3" data-target=".erasure-bg">
    <a href="#">Erasure</a>
</div>
<div class="menu-item menu-item-4" data-target=".training-bg">
    <a href="#">Training</a>
</div>
<div class="menu-item menu-item-5" data-target=".product-bg">
    <a href="#">Products</a>
</div>
<div class="menu-toggle recovery-bg">
    recovery-bg
</div>
<div class="menu-toggle forensic-bg">
    forensic-bg
</div>
<div class="menu-toggle erasure-bg">
    erasure-bg
</div>
<div class="menu-toggle training-bg">
    training-bg
</div>
<div class="menu-toggle product-bg">
    product-bg
</div>

then

jQuery(function ($) {
    var $bgs = $('.menu-toggle');
    $('.menu-item').click(function () {
        var $target = $($(this).data('target')).stop(true).slideToggle();
        $bgs.not($target).filter(':visible').stop(true, true).slideUp();
    })
})

Demo: Fiddle