Question

I have a working click-able, collapsible div script:

$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        $(".toggle-content").hide();
        $(this).next(".toggle-content").slideToggle(500);   
    });
});

It started out just like this:

$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        $(this).next(".toggle-content").slideToggle(500);   
    });
});

Thsi second example worked nicely, but it made it so the user could open all the divs and this made the page too tall. I added the hide() function, but now it’s causing this other issue.

I would like to add functionality that when each div is clicked again, it actually closes it (hides it). Then, all divs would be closed (hidden) at this point. Currently, one div is always open (visible). I want both functions if possible…

I’m using accordion elsewhere (I know this could be used here) but I kind of need to get this going quickly so I’m not trying to implement the simpler script here. If I could just find a fix using the existing script, I’d be stoked.

EDIT

I’ve edited the fiddle to show the improved fix:

http://jsfiddle.net/nicorellius/gsDVS/

Answer 1

This should work. It will ignore hiding the content related to the clicked element and will slideToggle that div accordingly

$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        var $next= $(this).next(".toggle-content");
        $(".toggle-content").not($next).hide();
        $next.slideToggle(500);   
    });
});