Question

I have this script I am using for a horizontal accordion. You can see the functionality here:
http://jsfiddle.net/vXpPg/

I am looking to have the open slide close on click as well.

Any help would be appreciated. Thank you!

Answer 1

here you go:

http://jsfiddle.net/vXpPg/1/

I modified your click function to check the width of the section you are clicking on first. If this width is equal to what you wrote as maxWidth then we know that we just want to collapse it (change its width to the minWidth setting). If it is not, then we know it must be a small section, and need to expand like normal (the code you already had).

$("ul li").click(

function() {
    /*
     * I added this
     */
    if ($(this).width() == maxWidth) {
        $(this).animate({
            width: minWidth + "px"
        }, {
            queue: false,
            duration: 400
        });
    } else {
        /*
         * You had this
         */
        $(lastBlock).animate({
            width: minWidth + "px"
        }, {
            queue: false,
            duration: 400
        });
        $(this).animate({
            width: maxWidth + "px"
        }, {
            queue: false,
            duration: 400
        });
    }
    lastBlock = this;
});​