Display one div at a time

Question

When I click on a link on the menu, a div slides down to show some contents. But the problem is, I only want one div at a time.

As you can see on the fiddle, if you click on one link, a div appears, if you click on another link, another div appears below the the first div.

I only want one DIV at a time. What should I modify in my javascript code to do that?

PS: I want my div to hide if I click on the same link again :

Click "HOME" -> Show div Click "HOME" -> close div

    $(document).ready(function(){

  $("#flip").click(function(){
    $("#panel").slideToggle("fast");
  });
   $("#flip2").click(function(){
    $("#panel2").slideToggle("fast");
  });
     $("#flip3").click(function(){
    $("#panel3").slideToggle("fast");
  });
     $("#flip4").click(function(){
    $("#panel4").slideToggle("fast");
  });
});

http://jsfiddle.net/U52rr/8/

Thanks for your answers guys, I really appreciate your help !

Answer 1

Ok buddy, first of all, you can't have more than 1 element with the same id, so that should be the first thing you clear, second of all you can clean your markup a bit and have something easier to manage for example:

<nav>
   <ul>
      <li><a class="flip" href="#panel1">Home</a></li>
      <li><a class="flip" href="#panel2">Agenda</a></li>
      <li><a class="flip" href="#panel3">Media</a></li>
      <li><a class="flip" href="#panel4">Contact</a></li>
   </ul>
</nav>
...
<div class="panel" id="panel1">
    <div>Anatomy</div>
</div>
<div class="panel" id="panel2">
    <div>Anatomy is</div>
</div>
<div class="panel" id="panel3">
    <div>Anatomy is destiny.</div>
</div>
<div class="panel" id="panel4">
    <div>Anatomy is destiny555.</div>
</div>

Now you can target all the links and panels simply by their class (should clean up your css as well).

Then comes the javascript:

$(".flip").on("click", function(e) {        
    var target = $(this).attr("href");
    $(target).slideToggle("fast");
    $(".panel").not(target).hide();

    e.preventDefault();
});

Here is the fiddle: http://jsfiddle.net/U52rr/43/

Answer 2

You could use the same HTML and have something more simple using this approach:

Mainly I traverse all your links inside the UL, and could use only a function the binding the click.

before making the panel link visible, must hide all the others that are visible

$(document).ready(function(){
  $("nav ul a").click(function(){
    $('#layer > div:visible').hide();
    $('#' + (this.id).replace('flip','panel')).slideToggle("fast");
  });
});

http://jsfiddle.net/U52rr/29/

Answer 3

$(document).ready(function () {

    $("#flip").click(function () {
        $('.current').removeClass('.current').hide();
        $("#panel").addClass("current").slideDown("fast");
    });
    $("#flip2").click(function () {
        $('.current').removeClass('.current').hide();
        $("#panel2").addClass("current").slideDown("fast");
    });
    $("#flip3").click(function () {
        $('.current').removeClass('.current').hide();
        $("#panel3").addClass("current").slideDown("fast");
    });
    $("#flip4").click(function () {
        $('.current').removeClass('.current').hide();
        $("#panel4").addClass("current").slideDown("fast");
    });
});

You need to hide (or slide up -depending on the look you want) the currently displayed div. I added a class of current to the displayed div to keep track of it. http://jsfiddle.net/U52rr/8/

Answer 4

I would add a class to your divs and links, and add an on click event to your links such as:

$(document).ready(function(){
    $('.linkClass').click(function(){
        $('.divClass').not($(this).parent('.divClass')).hide();
        $(this).parent('.divClass').slideToggle("fast");
    });
}

This will hide all the other divs except the one with the link being clicked on.

Answer 5

DEMO

add a class to all div instead of IDs to be faster.

$("#flip").click(function(){
    $(".panelClass").hide();
    $("#panel").slideDown("fast");
});

Answer 6

Add class to all div ..

 $("#flip3").click(function(){
 $(".close").hide();
 $("#panel3").slideToggle("fast");

DEMO JSFIDDLE

Answer 7

try this:

var $panels = $(".panel").hide();
$(".link").click(function(e){    
    e.preventDefault();    
    var $panel = $panels.eq($(this).data("index"));
    $panels.not($panel).slideUp();    
    if($panel.is(":visible")){
       $panel.slideUp();
        return;
    }        
    $panel.slideDown();
});

working fiddle here: http://jsfiddle.net/U52rr/33/

i hope it helps.

Answer 8

When executing the .slideToggle(), you could execute .hide() of the others at the same time.

$("#flip").click(function(){
$("#panel").slideToggle("fast");
$("#panel2").hide("fast");
$("#panel3").hide("fast");
$("#panel4").hide("fast");

This FIDDLE should help: http://jsfiddle.net/U52rr/12/