I'm trying to use the Collapse functionality in Bootstrap, and for the most part it's working. I'm essentially creating an accordion of sorts, though it doesn't look like one, in that I only want one panel to be visible at a time. I'm not using the accordion functionality from Bootstrap, though, because it seems to depend on using Panels, which I don't want to do.
So, having got it NEARLY working, the only problem was that if you expanded one div, then clicked on the 'header' (just another div) to open another, the original div remained expanded too. They weren't mutually exclusive. I thought this would be easily fixed by adding a line to my jQuery script, called when the 'header' div is clicked, which would hide all collapsible panels before expanding the one associated with the clicked 'header', but for reasons I cannot figure out, what adding that line actually does is cause ALL of the collapsible panels to expand when the first 'header' is clicked. After that initial click, though, everything works properly. I'm stumped!
I've created a fiddle to show the problem here.
I eventually succeeded in this using simple slideUp and slideDown functions. Working version can be found here. Also note the addition of hidden="hidden" to the divs which are effectively the accordion 'panes'.