Question

I want to slidetoggle divs with different content in it by targeting the content by name in my navigation.

I have this already:

$(".div1, .div2, .div3").hide();

$(document).ready(function(){

    $("nav a").click(function () {  
    var divname= this.name;
    $("."+divname).siblings().slideUp(500, function () {
    $("."+divname).slideToggle();
});
});
});

<nav>
<a name="div1">SlideToggle Div 1</a>
<a name="div2">SlideToggle Div 2</a>
<a name="div3">SlideToggle Div 2</a>
</nav>

<div id="container">
<div class="div1">Content Div 1</div>
<div class="div2">Content Div 2</div>
<div class="div3">Content Div 3</div>
</div>

I want that every div slides up first, then slidesdown with the content of the new div, that is targeted in menue and so forth.

Problem with that script:

With two divs it’s working. Adding a third does make it slide down and slide up. Adding a forth does make it slide down, slide up and slide down and so forth. Must be something wrong with the siblings idea?

Thank you.

Answer 1

Have a working jsfiddle page so look at this. I did some work on your code check out if this is what you wanted. UPDATED THE CODE Retry the link now.

$(".div1, .div2, .div3").hide();
$(document).ready(function() {
  var firstTime = true;
  $("nav a").click(function() {
    var divname = this.name;
    if (!firstTime) {
        if ($(".slid").hasClass(divname)) {
            firstTime = true;
            $(".slid").removeClass("slid").slideUp();
        } else {

            $(".slid").removeClass('slid').slideUp(500, function() {
                $("." + divname).slideToggle().addClass("slid");

            });
        }
    } else {
        $("." + divname).slideDown().addClass("slid");
        firstTime = false;
    }

  });
});