You are here: Home / Documentation / How To's / Create interior collapsible regions

Create interior collapsible regions

by ledwell published Feb 04, 2009 04:38 PM, last modified Aug 16, 2016 10:49 AM
This will show you how to add collapsible regions using existing definition lists and CSS within the main content regions of a plone page.

Want to create a collapsible region? This tut will show you how.

Create a new page and create a definition list. Note.. this works ONLY on a definition list a bulleted or numbered list wont cut it.

HTML Kupu Way

Create a definition list by;

  • Selecting a black area and choosing the insert definition list icon. Definition List
  • Add some text that will be your clickable header then push your "return" or "enter" key
  • Add some text that acts as the definition for the header you just created then push your "return" or "enter" key

Edit the HTML

  • Select the "HTML" text in the kupu toolbar.
  • Find the following tag in the code. <dl> (there should only be one unless you have used them before)
  • Edit that  tag so it looks like this. <dl  class="collapsible inline collapsedOnLoad">
  • Find the following tag in the code. <dt> will follow after the <dl> tag.
  • Edit that tag so it looks like this. <dt class="collapsibleHeader">
  • Find the following tag in the code. <dd> will be after the <dt> tag.
  • Edit that tag so it looks like this. <dd class="collapsibleContent">

Kupu Easy Way

Collapsible Header

Website Administrator note.

The following tutorial uses the style menu located on the right. Before trying this tutorial make sure that your administrator has added the following code into kupu's Library "styles" area.

 "Collapsible Header|dt|collapsibleHeader

Collapsible Content|dd|collapsibleContent

Collapsible Region|dl|collapsible inline collapsedOnLoad"


  • Create text you want to be your header.
  • Click inside that text then choose "Collapsible Header" from the drop down "styles" menu 
  • Create the text you want to be the content.
  • Click inside that content text choose from styles drop down menu "Collapsible Content".
  • Click in the middle of the content text and drag to the middle of the header text and choose "Collapsible Region" from the styles drop down menu.