jmac-slash0/togglerDemo.html

## togglerDemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Toggler Demo</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<style>
    .hidden {
        display: none;
    }

    .toggler {
        cursor: pointer;
    }

    .handCursor {
        cursor: pointer;
    }

    .toggleable {
        border: 2px solid lightgrey;
        border-radius: 5px;
    }

    .icon-on, .icon-off {
        width: 26px;
        height: 26px;
        display: inline-block;
        vertical-align:bottom;
    }

    .icon-on {
        background: url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/switch_on.png) no-repeat;
    }

    .icon-off {
        background: url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/switch_off.png) no-repeat;
    }

</style>

<script>
    $(document).ready(function () {
        // Wrap toggler text with hand cursor so it looks like it does something
        // Also makes it so attaching the toggler function goes to the text AND icon
        $(".toggler").parent().wrapInner('<span class="handCursor" />');

        // Attach all togglers to the toggleSection function
        $(".toggler").parent().on("click", function () {
            toggleSection(this);
        });

        // Run updateSection on all Togglers - will setup their icons and tooltip values based on
        // their state
        $(".toggler").each(function () {
            updateSection(this);
        });
    });

    // This function changes the right arrow to a down arrow and back again when the toggle
    // of a section occurs. Then toggles the section.
    function toggleSection(caller) {
        var section = getToggleSection(caller);

        // Toggle function - the order of these last 3 is important; adding the hidden class for consistency
        // can't be done before activating the toggle function, and updating the section has to be done
        // after the hidden class has been added
        $(section).toggle("blind", 250);

        // Update class, tooltip, and icon
        $(section).toggleClass("hidden");
        updateSection(caller);
    }

    // Updates tooltip and icon
    function updateSection(caller) {
        var section = getToggleSection(caller);
        var toggler = $(section).closest(".wrapper").find(".toggler");

        // Section is getting hidden - setup icon for showing again
        if ($(section).hasClass("hidden")) {
            $(toggler).attr("title", "Show");
            $(toggler).removeClass("icon-off");
            $(toggler).addClass("icon-on");
        }
        else { // Section is getting unhidden - setup icon for hiding again
            $(toggler).attr("title", "Hide");
            $(toggler).removeClass("icon-on");
            $(toggler).addClass("icon-off");
        }
    }

    // Get toggleable section function
    function getToggleSection(caller) {
        return $(caller).closest(".wrapper").find(".toggleable");
    }

    // Show section helper
    function showSection(section) {
        if ($(section).hasClass("hidden"))
            toggleSection(section);
    }

    // Hide section helper
    function hideSection(section) {
        if (!$(section).hasClass("hidden"))
            toggleSection(section);
    }

    // This toggles the collapsing or expanding of all toggleable sections
    function toggleExpandOrCollapse(button) {
        var currentState = $(button).text();
        var newState = "Expand All";
        if (currentState == "Expand All") {
            expandAll();
            newState = "Collapse All"
        }
        else {
            collapseAll();
        }
        $(button).text(newState);
    }

    // Expand all helper
    function expandAll() {
        $(".toggleable").each(function () {
            showSection(this);
        });
    }

    // Collapse all helper
    function collapseAll() {
        $(".toggleable").each(function () {
            hideSection(this);
        });
    }
</script>
</head>

<body>

    <h1>Toggle Demo</h1>
    <p>Click the icons to toggle sections. Mouse over them to see their action.</p>

    <!-- This wrapper/toggler/toggleable format is important for the toggler to work properly -->
    <div class="wrapper">
        <h3><i class="toggler"></i>&nbsp;Starting Hidden</h3>
        <div class="toggleable hidden">
            <p>This started hidden.</p>
        </div>
    </div>

    <div class="wrapper">
        <h3><i class="toggler"></i>&nbsp;Starting Shown</h3>
        <div class="toggleable">
            <p>This started shown.</p>
        </div>
    </div>

    <div>
        <button onclick="toggleExpandOrCollapse(this)">Expand All</button>
    </div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Toggler Demo</title>

	<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

	<style>
	.hidden {
	display: none;
	}

	.toggler {
	cursor: pointer;
	}

	.handCursor {
	cursor: pointer;
	}

	.toggleable {
	border: 2px solid lightgrey;
	border-radius: 5px;
	}

	.icon-on, .icon-off {
	width: 26px;
	height: 26px;
	display: inline-block;
	vertical-align:bottom;
	}

	.icon-on {
	background: url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/switch_on.png) no-repeat;
	}

	.icon-off {
	background: url(http://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/switch_off.png) no-repeat;
	}

	</style>

	<script>
	$(document).ready(function () {
	// Wrap toggler text with hand cursor so it looks like it does something
	// Also makes it so attaching the toggler function goes to the text AND icon
	$(".toggler").parent().wrapInner('<span class="handCursor" />');

	// Attach all togglers to the toggleSection function
	$(".toggler").parent().on("click", function () {
	toggleSection(this);
	});

	// Run updateSection on all Togglers - will setup their icons and tooltip values based on
	// their state
	$(".toggler").each(function () {
	updateSection(this);
	});
	});

	// This function changes the right arrow to a down arrow and back again when the toggle
	// of a section occurs. Then toggles the section.
	function toggleSection(caller) {
	var section = getToggleSection(caller);

	// Toggle function - the order of these last 3 is important; adding the hidden class for consistency
	// can't be done before activating the toggle function, and updating the section has to be done
	// after the hidden class has been added
	$(section).toggle("blind", 250);

	// Update class, tooltip, and icon
	$(section).toggleClass("hidden");
	updateSection(caller);
	}

	// Updates tooltip and icon
	function updateSection(caller) {
	var section = getToggleSection(caller);
	var toggler = $(section).closest(".wrapper").find(".toggler");

	// Section is getting hidden - setup icon for showing again
	if ($(section).hasClass("hidden")) {
	$(toggler).attr("title", "Show");
	$(toggler).removeClass("icon-off");
	$(toggler).addClass("icon-on");
	}
	else { // Section is getting unhidden - setup icon for hiding again
	$(toggler).attr("title", "Hide");
	$(toggler).removeClass("icon-on");
	$(toggler).addClass("icon-off");
	}
	}

	// Get toggleable section function
	function getToggleSection(caller) {
	return $(caller).closest(".wrapper").find(".toggleable");
	}

	// Show section helper
	function showSection(section) {
	if ($(section).hasClass("hidden"))
	toggleSection(section);
	}

	// Hide section helper
	function hideSection(section) {
	if (!$(section).hasClass("hidden"))
	toggleSection(section);
	}

	// This toggles the collapsing or expanding of all toggleable sections
	function toggleExpandOrCollapse(button) {
	var currentState = $(button).text();
	var newState = "Expand All";
	if (currentState == "Expand All") {
	expandAll();
	newState = "Collapse All"
	}
	else {
	collapseAll();
	}
	$(button).text(newState);
	}

	// Expand all helper
	function expandAll() {
	$(".toggleable").each(function () {
	showSection(this);
	});
	}

	// Collapse all helper
	function collapseAll() {
	$(".toggleable").each(function () {
	hideSection(this);
	});
	}
	</script>
	</head>

	<body>

	<h1>Toggle Demo</h1>
	<p>Click the icons to toggle sections. Mouse over them to see their action.</p>

	<!-- This wrapper/toggler/toggleable format is important for the toggler to work properly -->
	<div class="wrapper">
	<h3><i class="toggler"></i> Starting Hidden</h3>
	<div class="toggleable hidden">
	<p>This started hidden.</p>
	</div>
	</div>

	<div class="wrapper">
	<h3><i class="toggler"></i> Starting Shown</h3>
	<div class="toggleable">
	<p>This started shown.</p>
	</div>
	</div>

	<div>
	<button onclick="toggleExpandOrCollapse(this)">Expand All</button>
	</div>

	</body>
	</html>