Collapsible panes

When to use

Collapsible panes allow you to hide chunks of text in a hidden pane and reveal them when a user clicks the pane’s header. This feature can be helpful, for example, when creating long lists of lists where you want to keep the list headings above-the-fold. Collapsible panes are a bit more involved than some other shortcodes, but they are still relatively easy to master!

Basic Usage:

[collapse-pane title="Heading"]Content[endcollapse-pane]

  1. Begin opening the collapsible pane:
    [collapse-pane
  2. Add the required title attribute, set its value to the heading you would like to appear at the top of the pane, and add the final bracket:
    title=”The heading of a collapsible pane.]
  3. Add the content to be shown in the pane:
    Content of the collapsible pane.
  4. Close the collapsible pane:
    [endcollapse-pane]

Results

Code


[collapse-pane title=”The heading of a collapsible pane.”]
Content of the collapsible pane.
[endcollapse-pane]

Rendering



Content of the collapsible pane.


Special characters, quotation marks, asterisks etc. in a title value must be entered as HTML entities. See examples below. More about HTML entities at W3 Schools

color attribute

Just like regular panes [collapse-pane] has one optional attribute: color. This attribute changes the background color or the pane. color has six allowable values: blue, gray, green, light-gray, orange and red. Below are color attribute usage examples along with HTML entity examples of special characters in titles.

color="blue"

Code


[collapse-pane title=”The "Title" of a blue collapsible pane with HTML entity double quotation marks around the word title.” color=”blue”]
Some interesting content in a blue collapsible pane.
[endcollapse-pane]

Rendering

color="gray"

Code


[collapse-pane title=”A gray collapsible pane with a copyright symbol HTML entity in the heading ©” color=”gray”]
Some interesting content in a gray collapsible pane.
[endcollapse-pane]

Rendering



Some interesting content hidden in a blue collapsible pane.

color="green"

Code


[collapse-pane title=”A green collapsible pane with a trademark symbol HTML entity in the heading ®” color=”green”]
Some interesting content in a green collapsible pane.
[endcollapse-pane]

Rendering



Some interesting content hidden in a green collapsible pane.

color="light-gray"

Code


[collapse-pane title=”A light-gray collapsible pane with an apostrophe HTML entity in the heading '” color=”light-gray”]
Some interesting content in a light-gray collapsible pane.
[endcollapse-pane]

Rendering



Some interesting content hidden in a light-gray collapsible pane.

color="orange"

Code


[collapse-pane title=”An orange collapsible pane with quotation mark and apostrophe HTML entities in the heading: "Pilgrim's progress"” color=”orange”]
Some interesting content in a orange collapsible pane.
[endcollapse-pane]

color="red"

Code


[collapse-pane title=”A red collapsible pane with Pound Sterling, Euro, and cent HTML entities in the heading: £ € ¢” color=”red”]
Some interesting content in a red collapsible pane.
[endcollapse-pane]

Rendering