Collapsible content

On this page:

About collapsible content

Collapsible content (also known as accordion or expand/collapse content) can be added manually to a Basic Page via the HTML source option in the WYSIWYG toolbar, or to non-Basic pages as a Text widget. There is also a collapsible content display in the Listings widgets, and a collapsible display for FAQ widgets.

Collapsible content can be mixed with standard text on a Basic page or text widget; see Figure 1 for an example of this layout on a Basic page.

Figure 1: collapsible content on a Basic page
Screenshot of a Sample Basic page with two example collapsible containers between paragraph text

Back to list

How to add collapsible content (WYSIWYG)

Follow these steps to add collapsible content to a Basic page or a Text widget using the WYSIWYG toolbar:

  1. Select the HTML source button in the editing toolbar.
  2. Copy and paste the expand all/collapse HTML: To allow site visitors to be able to open all sections at once, copy and paste the "Expand/Collapse All" sample code block first into the HTML source (see Figure 2). Note: This should always be placed above your collapsible containers. 
  3. Copy and paste the collapsible container HTML: Copy and paste the collapsible container sample code block into the HTML source (see Figure 2).
  4. Add more containers: To add multiple sections, copy and paste the collapsible container sample code block from step #3 as many times as needed. 
  5. Edit the content: Select the HTML source button again to return to the standard view. You can now replace the placeholder sample text with your actual content (see Figure 3).
  6. Save your page or widget when ready.
Figure 2: HTML source of a Basic page with the expand/collapse and collapsible container sample code
Screenshot of the HTML source of the Sample Basic page with the sample collapsible content code pasted in
Figure 3: Basic page WYSIWYG view with collapsible content containers
Screenshot of the WYSIWYG view of the Sample Basic page with the collapsible containers highlighted

Back to list

Sample HTML code (copy and paste)

Select the below HTML code samples to add the expand/collapse all link and the individual collapsible containers to your Basic page or Text widget:

Expand all/collapse all sample code (add before collapsible containers):

<div class="bwb-expand-all-links">
<a class="bwb-collapsible-collapse" href="#bwb-expand-all">collapse all</a> <a class="bwb-collapsible-expand" href="#bwb-expand-all">expand all</a>
</div>

Collapsible containers sample code:

<div class="bwb-collapsible-container">
<h2 class="bwb-collapsible-controller">
Collapsible header (click to expand); add your own text
</h2>
<div class="bwb-collapsible-target">
<p>
Add your content for the collapsible container.
</p>
</div>
</div>

Paste the collapsible containers sample code multiple times to add multiple sections (see the above steps and Figures 2 and 3). 

Expand a collapsible item by default

If desired, one collapsible item can be expanded on the page by default (until a site visitor selects it to collapse). To have one collapsible container start off as expanded, add the bwb-start-expanded class to the first line of the collapsible item HTML, i.e.: <div class="bwb-collapsible-container bwb-start-expanded">. See Figure 4, below, for examples of the HTML class and a collapsible item expanded.

Figure 4: "bwb-start-expanded" class added to collapsible container
Screenshot of HTML view with collapsible containers with "expanded" class added
Figure 4: example of collapsible containers with one item expanded by default
Example of collapsible containers on a page with one item expanded

Back to list

Collapsible content notes

  • For best display, keep the heading text brief.
  • If a collapsible item is the last thing in your page content, it will be difficult to add non-collapsible content below it without going into HTML mode. When editing in HTML mode, you might want to leave an empty <p> tag after the last collapsible item. 
    • Similar issues may occur if you are trying to add non-collapsible content between two collapsible items, or if you are trying to delete all of a collapsible item. You may need to go into HTML mode to make these changes.
  • There can be only one expand all/collapse all link per page. The expand all/collapse all will act on all collapsible containers regardless of their location on the page. 

Back to list