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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment