This is something I’ve been wanting to write for a long while: a javascript that allows collapsing and expanding sections of a page. I already used the plugin “Collapsible elements”, but it puts javascript code in the page and I prefer to keep content and styling more separated. Thus, I wrote a plugin that just looks for divs with class=”collapse_content” and for each assumes the previous div is a title – which it makes clickable. The click expands or collapses the content of the collapse_content div.

The defining feature of my plugin over simpler solutions is that it is persistent, i.e. reloading a page will not collapse all the sections you’ve expanded. Technically this is done by having the script reload the whole page each time you expand or collapse and then passing the toggle state of the sections in a document as GET parameters. Yes, this sort of beats the purpose of ajax/javascript, but hey, it works.

See it in action here



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>