Creating a Collapsed Heading

by Jesse Norell — last modified Oct 18, 2011 09:11 PM

How to create a Collapsed Heading (a clickable Heading that expands/collapses the area below it) in Plone.

Purpose

This HowTo will walk you through adding a Collapsed Heading type in the TinyMCE visual editor, along with adding the CSS and JavaScript to your Plone instance to make it work. A Collapsed Heading as used here is a Heading you can click on to display or hide what is immediately below it, useful for progressive disclosure.

Prerequisites

Nothing special is needed, just a Plone 4 install, which comes with JQuery.

Step 1: Create Files (css/js)

Create the following two files on your local machine:

collapsedHeading.css

.collapsedHeading {
    cursor: hand;
    cursor: pointer;
}
 
.collapsedHeading.collapsed:before {
    content: "▶ ";
}
 
.collapsedHeading:before {
    content: "▼ ";
}

collapsedHeading.js

jq(document).ready(function() {
	$(".collapsedHeading.collapsed").next().hide();
 
	$(".collapsedHeading").click(function() {
	  $(this).next().slideToggle("fast");
	  $(this).toggleClass("collapsed");
	});
});

Step 2: Add Files (css/js) to Plone

Go to your Site Setup > Zope Management Interface > portal_skins > custom
Select File (type) then Click Add

Enter collapsedHeading.css as the Id
Click Browse to find and Select the collapsedHeading.css file you made in Step 1
Click Add to add the file to your Plone instance.

Select File (type) then Click Add

Enter collapsedHeading.js as the Id
Click Browse to find and Select the collapsedHeading.js file you made in Step 1
Click Add to add the file to your Plone instance.

Step 3: Register Files (css/js)

Go to your Site Setup > Zope Management Interface > portal_css
At the bottom of the page under Add a new stylesheet, type collapsedHeading.css as the ID/URL and Click Add.

Go to your Site Setup > Zope Management Interface > portal_javascripts
At the bottom of the page under Add a new script, type collapsedHeading.js as the ID/URL and Click Add.

Step 4: TinyMCE

Go to your Site Setup > TinyMCE Visual Editor
Under the Styles list, add these where you would like them to display in your editor's Style dropdown:

Collapsed Heading|h2|collapsedHeading collapsed
Expanded Heading|h2|collapsedHeading

Collapsed Subheading|h3|collapsedHeading collapsed
Expandeded Subheading|h3|collapsedHeading

Click Save

How it works

Clicking will show/hide only the immediately following element.

When editing a page in TinyMCE you will find Collapsed Heading and Expanded Heading in the Styles list; both types add a Heading that is clickable to show/hide the immediately following element.

Note that if if you press Enter in TinyMCE you will end up with a new html element, eg. a new <p> element, creating a new paragraph of text. This second element will not hide along with the first. If you need to group multiple elements together so they show/hide together, just put them inside a <div> or some other outer element. Eg.

<h2 class="collapsedHeading collapsed">Your Heading</h2>
<div>
 <p>This is my first paragraph.</p>
 <p>This is my second paragraph.</p>
 <p>This is a third, and they all hide together,
 thanks to the outer div element.</p>
</div>

Appearance

The look of this implementation was taken from the current Plone.org Knowledgebase menu, but you can easily customize it how you like in the css.

There is another option already present in Plone to collapse text under a heading, as described here under collapsiblesections.js. The look is different and probably more appropriate for some things, though I don't see how to integrate it into TinyMCE easily.

Conclusion

This is simple to add, and a useful technique to clean up pages otherwise cluttered with a lot of information.

Current