jQuery slideToggle()

Question

This is my website: http://www.noor-azmi.com/nt/

As you can see there will be 3 div s:

• "Click for Darwin image gallery"
• "Click for Kakadu image gallery"
• "Click for Alice Springs image gallery"

When clicked it should slide down a div with image thumbnails.

Problem is when you click "Click for Kakadu image gallery", the "Darwin image gallery" will slide down. So does when I click the "Click for Alice Springs image gallery"

Only when I click it one by one from Darwin, Kakadu, Alice Springs then it will be correct but if I am to click Kakadu or Alice Springs first without clicking on Darwin, the problems occurs

Why is that? Below is my jQuery code.

$(document).ready(function(){
    $(".fancybox").fancybox ();
        $("#darwin_button").click(function(){
        $("#darwin_panel").slideToggle("slow");
    });

    $("#kakadu_button").click(function(){
        $("#kakadu_panel").slideToggle("slow");
    });

    $("#alice_button").click(function(){
        $("#alice_panel").slideToggle("slow");
    });

});

Answer 1

I do a jsFiddle for you.

https://jsfiddle.net/n6391fdv/1/

Its works.

$('#darwin_button,#kakadu_button,#alice_button').click(function(){
   $('.panels').slideUp();
   $('.panels').hide();
   $('#panel'+$(this).attr('target')).stop().slideToggle();
});

And html

<div class="text" id="darwin_button" target="1">Click for Darwin image gallery</div>
<div class="text" id="kakadu_button" target="2">Click for Kakadu image gallery</div>
<div class="text" id="alice_button" target="3">Click for Alice Springs image gallery</div>
<div class="container_panel">
<div class="panels" id="panel1">
DARWIN
  <p><a class="fancybox" rel="darwin" href="image/darwin-pic6-big.jpg"><img src="image/darwin-pic6-small.jpg" width="120" height="80"></a> <a class="fancybox" rel="darwin" href="image/darwin-pic2-big.jpg"><img src="image/darwin-pic2-small.jpg" width="120" height="80"></a>      <a class="fancybox" rel="darwin" href="image/darwin-pic3-big.jpg"><img src="image/darwin-pic3-small.jpg" width="120" height="80"></a>      <a class="fancybox" rel="darwin" href="image/darwin-pic4-big.jpg"><img src="image/darwin-pic4-small.jpg" width="120" height="80"></a>                
  </p></div>


</div>
<div class="container_panel">
<div class="panels" id="panel2">KAKADU
  <p><a class="fancybox" rel="kakadu" href="image/kakadu-pic2-big.jpg"><img src="image/kakadu-pic2-small.jpg" width="120" height="80"></a><a class="fancybox" rel="kakadu" href="image/kakadu-pic3-big.jpg"> <img src="image/kakadu-pic3-small.jpg" width="120" height="80"></a><a class="fancybox" rel="kakadu" href="image/kakadu-pic-big1.jpg"><img src="image/kakadu-pic-small1.jpg" width="120" height="80"></a><a class="fancybox" rel="kakadu" href="image/kakadu-pic-big4.jpg">  <img src="image/kakadu-pic-small4.jpg" width="120" height="80"></a></p>
</div>
</div>
<div class="container_panel"><div class="panels" id="panel3">ALICE
  <p><a class="fancybox" rel="alice" href="image/alice-big1.JPG"><img src="image/alice-small1.jpg" width="120" height="80"></a> <a class="fancybox" rel="alice" href="image/alice-big2.jpg"><img src="image/alice-small2.jpg" width="120" height="80"></a><a class="fancybox" rel="alice" href="image/alice-big3.jpg"><img src="image/alice-small3.jpg" width="120" height="80"></a> <a class="fancybox" rel="alice" href="image/alice-big4.jpg"><img src="image/alice-small4.jpg" width="120" height="80"></a></p>
  </div></div>

Warning : When you click too much on your menu, the event slideToggle() do x time.

So you must use . stop ().slideToggle()

Hope that helps.

Answer 2

It is a HTML structure problem.

Get your div.panels in the correspondant #box1, #box2 and #box3 and it should be fine.

And also, you will not have to put a float: left; property on div.panels with this method.

Answer 3

You can include your panel div in the button div. Try something like this :

<div class="buttons" id="alice_button">Click for Alice Springs image gallery
  <div class="panels" id="alice_panel" style="display: block;">
    <p>
      <a class="fancybox" rel="alice" href="image/alice-big1.JPG"><img src="image/alice-small1.jpg" width="120" height="80"></a>
      <a class="fancybox" rel="alice" href="image/alice-big2.jpg"><img src="image/alice-small2.jpg" width="120" height="80"></a>
      <a class="fancybox" rel="alice" href="image/alice-big3.jpg"><img src="image/alice-small3.jpg" width="120" height="80"></a>
      <a class="fancybox" rel="alice" href="image/alice-big4.jpg"><img src="image/alice-small4.jpg" width="120" height="80"></a>
    </p>
  </div>
</div>

Answer 4

As Vincent said, it's a problem with your HTML's structure. Your gallery panels should be inside the corresponding box# div's, or you could try positioning them absolutely.

As it is now, when you hide one of the gallery div's, the visible divs will appear in the whitespace left from the hidden divs.