Take the 2-minute tour ×

I have a navigation that I am using jQuery slideshow to expose the content under the Navigation. I got the div's to toggle when you click a different nav item, but when I click the same nav item to close it, it just bounces the tab closed then open again. I have a close button inside of the div that is closing it for now.

How do I get a div to close once it's been opened>

Link to the example is here

My jQuery is as follows:

(function ($) {
    $.fn.showHide = function (options) {

        //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide'

        var options = $.extend(defaults, options);

        $(this).click(function () { 

             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this only fires once the animation is completed

          return false;



and i am firing with:


        speed: 300,  // speed you want the toggle to happen 
        changeText: 0, // if you dont want the button text to change, set this to 0

share|improve this question
How about checking to see if the clicked item is the current opened one (either adding/removing a class) or using is(":visible"). If it is just hide it, otherwise do the other sliding up / down stuff? –  Adam Tomat Oct 22 '12 at 9:42

2 Answers 2

Well, you're sliding all divs up at click, which means that the currently open div will slide up, too.


What I would recommend is giving the opened div a class like "is_open", which you remove when you open another div. You can check for the class on click before doing any other logic:

if($(this).hasClass('is_open')) return;
share|improve this answer
Can someone create a jsfiddle and give me a working example, I am still lost –  user1764887 Nov 17 '12 at 10:24

Just add a class to do the trick and avoid extra manipulation on all the divs with the $('.toggleDiv') selector.

The easiest would be to check if the toggleDiv is visible or not. Just by changing the 'display' property from none to block in the class will help out.

use simple $(this).addClass('opened_div'); to open div and remove it later.

share|improve this answer

Your Answer


