Created
August 3, 2013 02:08
-
-
Save royw/6144805 to your computer and use it in GitHub Desktop.
Addition to CollapsibleLists.js to support expand all, collapse all.
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
<div id="floatingbar"> | |
<ul> | |
<li><a href="#" onClick="CollapsibleLists.expand(true)">Expand All</a></li> | |
<li><a href="#" onClick="CollapsibleLists.expand(false)">Collapse All</a></li> | |
</ul> | |
</div> |
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
var CollapsibleLists = | |
new function(){ | |
// skipping the good stuff... | |
// Expands or collapses all list items depending on the passed value. | |
// if open is true, then opens all list items, else closes all list items. | |
this.expand = function(open){ | |
// find all li elements with class collapsibleList(Open|Closed) | |
// and set per open flag | |
var elems = document.getElementsByTagName('li'); | |
for (var index = 0; index < elems.length; index++) { | |
var elem = elems[index]; | |
if (elem.className.match(/(^| )collapsibleList(Open|Closed)( |$)/)) { | |
elem.className = | |
elem.className.replace( | |
/(^| )collapsibleList(Open|Closed)( |$)/, ''); | |
elem.className += ' collapsibleList' + (open ? 'Open' : 'Closed'); | |
} | |
} | |
// find all ul with class collapsibleList then | |
// remove collapsibleList(Open|Closed) | |
// then set per open flag | |
// also change style for open to "display: block;" and | |
// for not open to "display: none;" | |
elems = document.getElementsByTagName('ul'); | |
var first = true; | |
for (index = 0; index < elems.length; index++) { | |
elem = elems[index]; | |
// check whether this list should be made collapsible | |
if (elem.className.match(/(^| )collapsibleList( |$)/)) { | |
elem.className = | |
elem.className.replace( | |
/(^| )collapsibleList(Open|Closed)( |$)/, ''); | |
elem.className += ' collapsibleList' + (open ? 'Open' : 'Closed'); | |
elem.style.display = (open ? 'block' : 'none'); | |
// The top level ul's display style must be 'block' | |
if (first){ | |
elem.style.display = 'block'; | |
} | |
} | |
first = false; | |
} | |
}; | |
}(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment