Auto expand-collapse sections

by Alon Rotem

HTML

<h3>Some title1</h3>
<table border="1"><tr><td>Table here1</td></tr></table>
<h3>Some title2</h3>
<p></p>
<table border="1"><tr><td>Table here2</td></tr><tr><td>Table here2</td></tr><tr><td>Table here2</td></tr><tr><td>Table here2</td></tr></table>
<h3>Some title3</h3>
<p></p>
<table border="1"><tr><td>Table here3</td></tr></table>
<h3>Some title4</h3>
<p></p>
<table border="1"><tr><td>Table here4</td></tr></table>
<h3>Some title5</h3>
<p></p>
<table border="1"><tr><td>Table here5</td></tr></table>

JavaScript

var closedSection = " + ";
var openSection = " - ";
var titleTag = "h3";
var contentTag = "table";

$(document).ready(function () {
    //Setting the display to block is importnat because
    //tables have a default of display:table, 
    //which does not toggle with jquery.
    $(contentTag).css("display","block");
    $(titleTag).css("cursor","pointer");
    $(titleTag).nextAll("table").hide();
    $(titleTag).text(function(i, oldText) {
        return closedSection + oldText
    });
    $(titleTag).click(function(){ 
        $(this).nextAll(contentTag + ":first").slideToggle(500, 'swing');
        $(this).text(function(h, oldText){
            var newText = oldText;
            if(oldText.substr(0,3) == closedSection) {
                newText = openSection + oldText.substr(3);
            }
            else if(oldText.substr(0,3) == openSection) {
                newText = closedSection + oldText.substr(3);
            }
            return newText;
        });
    });
});