DIV folding/unfolding with javascript when clicking on navigation menu links

Question

Currently, the code below unfolds the DIVs every time the user clicks on a menu item (if he clicks several time on the same link it will fold and unfold the same number of times, but it never stays folded/closed).

What I would like is that when the user clicks a second time on the same menu item link, the DIV gets folded and stays like this. Like on this website

Edit: I realize the above might not be clear, so to summarize :

Current process:

• One click on a navigation menu link opens (unfolds) the associated DIV
• One more click on the same navigation link hides (folds) the DIV then reopens it automatically

Desired new process:

• One click on a navigation menu link opens (unfolds) the associated DIV
• One more click on the same navigation link hides (folds) the DIV and that's it. The DIV stays folded until the user clicks again on the same link, or on another menu items.

How could I achieve that? Many thanks

See http://jsfiddle.net/u3qtt6fo/5/

JS:

$("a").click(function() { 
    var page = $(this).data("page");
    var active = $(".fold.active");

    // if there is visible fold element on page (user already clicked at least once on link)
    if(active.length) {
      $(".fold.active")
      .animate({ width: "0" }, 200 )
      .animate({ height: "0" }, 200, function() {
      // this happens after above animations are complete
        $(this).removeClass("active")

        $("#"+page)
        .addClass("active")
        .animate({ height: "500px" }, 1000, 'linear' )
        .animate({ width: "500px" }, 400,'linear' )    


      })

    // clicking for the first time
    } else {  
      $("#"+page)
      .addClass("active")
      .animate({ height: "500px" }, 1000,'linear' )
      .animate({ width: "500px" }, 400,'linear' )

    }
});

HTML

<div id="fold1" class="fold">Div menu item 1</div>
<div id="fold2" class="fold">Div menu item 2</div>
<div id="fold3" class="fold">Div menu item 3</div>
<div id="fold4" class="fold">Div menu item 4</div>

<nav>
  <ul>
    <li><a href="#" data-page="fold1">Menu item 1</a></li>
    <li><a href="#" data-page="fold2">Menu item 2</a></li>
    <li><a href="#" data-page="fold3">Menu item 3</a></li>
    <li><a href="#" data-page="fold4">Menu item 4</a></li>
  </ul>
</nav>

CSS:

.fold {
    display: none;
    width: 0;
    height: 0;
}

.fold.active {
    display: inline-block;
}

#fold1 {
    border: solid 5px #bada55;
    background: red;
}

#fold2 {
    border: solid 5px #fed900;
    background: aqua;
}

#fold3 {
    border: solid 5px #223322;
    background: green;
}

#fold4 {
    border: solid 5px #55bada;
    background: purple;
}

ul {
    position: absolute;
    top: 50px;
    right: 50px;
    list-style-type: none;
}

Answer 1

is this what you need ? http://jsfiddle.net/u3qtt6fo/11/

I edited your code a little, I added jQuery selector "animated"

$("a").click(function () {
    var page = $(this).data("page");
    if ($('div:animated').id != page) {
        var active = $(".fold.active");

        // if there is visible fold element on page (user already clicked at least once on link)
        if (active.length) {
            active.animate({
            width: "0"
            }, 200)
                .animate({
                height: "0"
            }, 200, function () {
                // this happens after above animations are complete
                $(this).removeClass("active");
            })
        // clicking for the first time
        } else {
            $("#" + page)
                .addClass("active")
                .animate({
                height: "500px"
            }, 1000, 'linear')
                .animate({
                width: "500px"
            }, 400, 'linear')
        }
    }
});