Collapse slideToggle on Click jQuery

Question

I'm currently trying to make a sidebar menu that requires a lot of javascript; making a menu item active in class when clicked, and making it unactive when another item is clicked. The problem I'm having is that some Menu items have submenu items. Now when I click them, using jQuery, they slidetoggle to open, but when I click on another item, they too slideToggle to open. I am trying to make it so that when I click a different item, slidetoggle is undone on the other items

I'm sorry if my english is poor but I hope all understand what I am saying

Here's a jsFiddle

<script>
$(document).ready(function(){
    var guts = $('#guts').css('display');
    var guts2 = $('#guts2').css('display');
    var guts3 = $('#guts3').css('display');
  $("#click").click(function(){
        $("#guts").slideToggle("fast"); 
        if (guts2 == 'block')
            $("#guts2").slideToggle("fast");
        if (guts3 == 'block')
            $("#guts3").slideToggle("fast");
        $(this).addClass("active").siblings('.active').removeClass('active');
  });
  $("#click2").click(function(){
        $("#guts2").slideToggle("fast");
        if (guts == 'block')
            $("#guts").slideToggle("fast");
        if (guts3 == 'block')
            $("#guts3").slideToggle("fast");
        $(this).addClass("active").siblings('.active').removeClass('active');
  });
    $("#click3").click(function(){
        $("#guts3").slideToggle("fast");
                if (guts2 == 'block')
        $("#guts2").slideToggle("fast");
        if (guts == 'block')
            $("#guts").slideToggle("fast");
        $(this).addClass("active").siblings('.active').removeClass('active');
  });
    $("#home").click(function(){
        $(this).addClass("active").siblings('.active').removeClass('active');
        if (guts == 'block')
            $("#guts").slideToggle("fast");
        if (guts2 == 'block')
            $("#guts2").slideToggle("fast");
        if (guts3 == 'block')
            $("#guts3").slideToggle("fast");
  });
});
</script>       
    <div id="links">

        <a href="#/Home" id="home" class="active">Home</a>
        <a href="#/Staff" id="click">Staff</a>
            <div id="guts">
                <a href="#" class="guts">• Staff List</a>
            </div>
        <a href="#/Locations" id="click2">Locations</a>
            <div id="guts2">
                <a href="#" class="guts">• Location List</a>
            </div>
        <a href="#/Calendar" id="click3">Calendar</a>   
    </div>

Answer 1

Your variables are out of scope for what you want to happen. You are declaring them globally and when each of your click functions are called it doesn't update the variable, it grabs what the variable was initially was on page load which is 'none' .

Place the variables inside the functions so that it updates those variables when they are called.

Instead of:

var guts = $('#guts').css('display');
var guts2 = $('#guts2').css('display');
var guts3 = $('#guts3').css('display');
$("#click").click(function(){
    $("#guts").slideToggle("fast"); 
    if (guts2 == 'block')
        $("#guts2").slideToggle("fast");
    if (guts3 == 'block')
        $("#guts3").slideToggle("fast");
    $(this).addClass("active").siblings('.active').removeClass('active');
});

Do:

$("#click").click(function(){
    var guts = $('#guts').css('display');
    var guts2 = $('#guts2').css('display');
    var guts3 = $('#guts3').css('display');
    $("#guts").slideToggle("fast");
    if (guts2 == 'block') {
        $("#guts2").slideToggle("fast");
    }
    if (guts3 == 'block') {
        $("#guts3").slideToggle("fast");
    }
    $(this).addClass("active").siblings('.active').removeClass('active');
});

Optionally:

var guts, guts2, guts3;

$("#click").click(function(){
    guts = $('#guts').css('display');
    guts2 = $('#guts2').css('display');
    guts3 = $('#guts3').css('display');
    $("#guts").slideToggle("fast");
    if (guts2 == 'block') {
        $("#guts2").slideToggle("fast");
    }
    if (guts3 == 'block') {
        $("#guts3").slideToggle("fast");
    }
    $(this).addClass("active").siblings('.active').removeClass('active');
});

DEMO

Answer 2

I've rewritten the code using unordered list menu (my favourite for menus). Instead of adding click event to each menu item i've added one event that handles everything ( if you have custom stuff to add to any item, you can just include it using a conditional statement )

HTML:

<ul id="links">
    <li><a href="#/">Home</a></li>
    <li><a href="#/locations">Locations</a>
        <ul class="submenu">
            <li><a href="#/locations/list">Location List</a></li>
        </ul>
    </li>
    <li><a href="#/staff">Staff</a>
        <ul class="submenu">
            <li><a href="#/staff/list">Staff List</a></li>
        </ul>
    </li>
    <li><a href="#/calendar">Calendar</a></li>
</ul>

Javascript

$(document).ready(function () {

    $('#links a').click(function () {

        if (!$(this).hasClass('.active')) {
            $('.active').removeClass('active');
            $(this).addClass('active');
        }

        if ($(this).hasClass('toggled')) {

            $(this).removeClass('toggled');
            $(this).next().slideToggle(250);

        } else if ($(this).next('ul').length > 0) {

                $('.toggled').next().slideToggle(250);
                $('.toggled').removeClass('toggled');
                $(this).addClass('toggled');
                $(this).next().slideToggle(250);

        } else if(!$(this).parent().parent().hasClass('submenu')) {

                $('.toggled').next().slideToggle(250);
                $('.toggled').removeClass('toggled');

        }

    return false;

    })

});

And finally some CSS:

#links,
#links ul{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

#links a {
  display: block;
  padding: 1px 0
}

#links a.active {
    background-color: rgb(0, 173, 255);
}

#links ul{
    display: none
}

Check the DEMO