Skip to content

Instantly share code, notes, and snippets.

Last active December 21, 2015 18:29
Show Gist options
  • Save jmac-slash0/6347329 to your computer and use it in GitHub Desktop.
Save jmac-slash0/6347329 to your computer and use it in GitHub Desktop.
A demo for the jquery toggle function I wrote. It's neato because now that it's setup, toggling and updating sections with icons, tooltips, or whatever you like is easy, as is hiding or showing all sections at the same time.
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Toggler Demo</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
.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;
.icon-on {
background: url( no-repeat;
.icon-off {
background: url( no-repeat;
$(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 () {
// Run updateSection on all Togglers - will setup their icons and tooltip values based on
// their state
$(".toggler").each(function () {
// 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
// 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");
else { // Section is getting unhidden - setup icon for hiding again
$(toggler).attr("title", "Hide");
// Get toggleable section function
function getToggleSection(caller) {
return $(caller).closest(".wrapper").find(".toggleable");
// Show section helper
function showSection(section) {
if ($(section).hasClass("hidden"))
// Hide section helper
function hideSection(section) {
if (!$(section).hasClass("hidden"))
// 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") {
newState = "Collapse All"
else {
// Expand all helper
function expandAll() {
$(".toggleable").each(function () {
// Collapse all helper
function collapseAll() {
$(".toggleable").each(function () {
<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 class="wrapper">
<h3><i class="toggler"></i>&nbsp;Starting Shown</h3>
<div class="toggleable">
<p>This started shown.</p>
<button onclick="toggleExpandOrCollapse(this)">Expand All</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment