Question

So long story short, im working with some jquery tabs and im using this code.

css of the tabs:

/* ---------- INNER CONTENT (ACCORDION) STYLES ----*/
.accordian {    
    background-color:#fff;
    margin:20px auto;   
    color:red;
    overflow:hidden;

}

#boxOut{
    width:320px;
    height:410px;
    overflow:scroll;
    background-color:#fff;
    margin:154px auto auto 38px;

}






/*.accordian {
    width: 400px;
    margin: 50px auto;
}
*/
.accordian li {
    list-style-type: none;
    padding: 0 8px;
}

.dimension {
/*  height: 400px;
*/}


.odd, .even {
    font-weight: bold;
    height: 27px;
    padding-top: 3px;
    padding-left: 10px;
    border: 1px solid #d8d8d8;
    background: #ececec;
    color: #333;
    border-radius: 8px; 
-moz-border-radius: 8px; 
-webkit-border-radius: 8px;
margin-left:6px;
margin-right:6px; 

}

.logo{
    width:300px;
    margin:6px auto;
}

.intownLogo{
    width:255px;
    margin:6px auto;
}

.spaces{
    margin-top:8px; 
}

js:

   $(function() {
        // Hide all the content except the first
        //$('.accordian li:odd:gt').hide();
        $('.accordian li:odd').hide();


        // Add the dimension class to all the content
        $('.accordian li:odd').addClass('dimension');

        // Set the even links with an 'even' class
        $('.accordian li:even:even').addClass('even');

        // Set the odd links with a 'odd' class
        $('.accordian li:even:odd').addClass('odd');

        // Show the correct cursor for the links
        $('.accordian li:even').css('cursor', 'pointer');

        // Handle the click event
        $('.accordian li:even').click( function() {
            // Get the content that needs to be shown
            var cur = $(this).next();

            // Get the content that needs to be hidden
            var old = $('.accordian li:odd:visible');

            // Make sure the content that needs to be shown 
            // isn't already visible
            if ( cur.is(':visible') )
                return false;

            // Hide the old content
            old.slideToggle(500);

            // Show the new content
            cur.stop().slideToggle(500);

        } );
    });

My jquery is noobish at best so although i undestand what its doing, i cant edit it without breaking it…lord knows ive tried lol.

The part im having problems with is that, with these tabs, although they work, they work with the .next() functions etc, so when a tab is open, if i click the same tab to close, it doesn’t close, it only closes when another tab is clicked.

What im needed help with is ….something that says

“logic” if this tab is already open and is clicked, close the current open tab.
so that said, for example, based on the code above

pseudo code coming:

if ( cur.is(':visible') && cur.is(':clicked') )
        cur.slideToggle();

Thanks for your help in advanced.

Answer 1

You can use the .toggle() event. It’s simple – you pass it functions as parameters. Each function is run in turn as you click on the target. A simple example:

cur.toggle(
    function()    //function 1
    {
        cur.show();
    },
    function()    //function 2
    {
        cur.hide();
    }
);

The first time you click, it runs the first function, executing cur.show();. The next click runs the second function, running cur.hide();. Another click runs the first function again, and so on and so on. You can even add more functions, so you have specific functions on the 1st through nth clicks, over and over.