Yet Another Collapser.js

Long, deeply nested lists, get unwieldy. I want to interactively collapse/expand them to see an entire level without its sub-lists. This could be a nice enough — simple but not stupid — exercise in programming JavaScript, DOM, jQuery, etc. ;o)


  1. Collect all elements I’d want to collapse/expand:

    I only want to hide nested stuff, thus the “li>*” direct descendant selectors. this will be each DOM element the function is called for. $(this) “wraps” it in a jQuery object, and we keep that to repeadely use jQuery’s methods on the element.

  2. Use text as collapsing/expanding controls (widgets?):
    $c = $('<span class="collapser">↧</span>');
  3. Handle clicks on controls:
    $ {$(this).next().toggle();});
  4. Insert a control before the collapsible:
    var $o = $(this);
  5. Render as initially collapsed if HTML element marked class="collapsed":
    if ($o.hasClass("collapsed"))
  6. Style controls, and a bit wider so easier clicking target:
    .collapser{padding:0 .4em}

The complete — sweetly short — script would be something like this:

$(function() { // Do this when DOM ready.
	$("ol,ul,pre,xmp").each(function() { // Collapse these.
		var $c = $("<span>↧</span>"); // Create another widget.
		$ {$(this).next().toggle();}); // Show/hide when clicked.
		var $o = $(this); // Ref' to wrapped DOM element.
		$o.before($c); // Insert widget into DOM.
		if ($o.hasClass("collapsed")) // Initial state.
<style>.collapser{padding:0 .4em}</style>

DOM traversal

Easier to find the control at the beginning of the line of list items, so let’s move it there. But, what if an item contains several collapsibles?

var $p = $o.parent();
if (! $p.children().first().is(".collapser"))
	// Insert control before first sibling, if $o is first collapsible.
	// Otherwise, insert just before $o.

And the click handler needs to be modified to look a little farther for its collapsible:

function() {

Loading and dependencies

jQuery and tweaks

  1. Don’t re-create same (anonymous) handler per widget:
    $(document).on("click", ".collapser", function() { // Listen to clicks on controls.
    	return false;
  2. Move the widget’s content from HTML to CSS, so can style it, like maybe use an icon font (Webfont) instead of standard Unicode glyphs:
    var $c = $('<span class="collapser"></span>');
  3. Using span instead of anchor (a), so mouse pointer doesn’t change, giving no indication that widget is clickable.

    Maybe button would be more semantic? But would rather avoid browser’s (OS’s) widgets?

  4. Make selector a (global) constant so can tweak which elements to collapse:
    window.COLLAPSIBLES = "ol,ul,xmp,pre,blockquote";
  5. Markup to override behavior — add this class to prevent element from collapsing:
  6. Configurable roots for selectors?
    $(ROOTS).children(COLLAPSIBLES) ...

    But, nicer if used as a plugin — just apply on things:

    $(".entry-content ").collapser({collapsibles: "ol"});
  7. Toggle the arrow direction:
  8. jQuery plugin: see CoffeeScript below.
  9. Run on document.ready automatically?


  1. How to encapsulate as jQuery plugin in CoffeeScript? See Cookbook for the short version, MiniBoilerplate for the long one.



  1. Integrating into this site’s theme, Stencil?
  2. WP plugin?

Prior art?

  1. jQuery Collapse: complicated plugin, ~4KiB.

Comments are closed.