Overview

An Accordion can be used to show and hide content within the Pages Text Component. 

How to

1. When editing a Page, add a Text component.

2. Go to the Source tab and then paste the following code as an example

3. Accordion Code (3 sections):

Claromentis v8

<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
  <div class="panel panel-default">
    <div class="panel-heading" id="headingOne" role="tab">
     <h4 class="panel-title"><a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">Title One </a></h4>
    </div>
    <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
      <div class="panel-body">Text Content One</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" id="headingTwo" role="tab">
      <h4 class="panel-title"><a aria-controls="collapseTwo" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo" role="button">Title Two </a></h4>
    </div>

    <div aria-labelledby="headingTwo" class="panel-collapse collapse" id="collapseTwo" role="tabpanel">
      <div class="panel-body">Text Content Two</div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" id="headingThree" role="tab">
      <h4 class="panel-title"><a aria-controls="collapseThree" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseThree" role="button">Title Three </a></h4>
    </div>

    <div aria-labelledby="headingThree" class="panel-collapse collapse" id="collapseThree" role="tabpanel">
      <div class="panel-body">Text Content Three</div>
    </div>
  </div>
</div>

Claromentis v9+

<div aria-multiselectable="true" class="accordion" id="accordion" role="tablist">
 <div class="card"> 
  <div class="card-header" id="headingOne" role="tab"> 
   <h4 class="mb-0">
    <button aria-controls="collapseOne" aria-expanded="true" class="btn btn-link btn-block text-left" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">Title One </button>
   </h4> 
  </div> 
  <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel"> 
   <div class="card-body">Text Content One</div> 
  </div> 
 </div> 
 <div class="card"> 
  <div class="card-header" id="headingTwo" role="tab"> 
   <h4 class="mb-0">
    <button aria-controls="collapseTwo" aria-expanded="false" class="btn btn-link btn-block text-left" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo" role="button">Title Two</button>
   </h4> 
  </div> 
  <div aria-labelledby="headingTwo" class="panel-collapse collapse" id="collapseTwo" role="tabpanel"> 
   <div class="card-body">Text Content Two</div>
  </div> 
 </div> 
 <div class="card"> 
  <div class="card-header" id="headingThree" role="tab"> 
   <h4 class="mb-0">
    <button aria-controls="collapseThree" aria-expanded="false" class="btn btn-link btn-block text-left" data-parent="#accordion" data-toggle="collapse" href="#collapseThree" role="button">Title Three</button>
   </h4> 
  </div> 
  <div aria-labelledby="headingThree" class="panel-collapse collapse" id="collapseThree" role="tabpanel">
   <div class="card-body">Text Content Three</div>
  </div> 
 </div>
</div>

Replace the the highlighted 'title' text (i.e. 'Title One') with your title and the content body text (i.e. 'Text Content One') with your text content.

Additional Sections

If you wish to use more than 3 sections in your accordion you will need to add another section inside the accordion wrapper after the other sections:

Claromentis v8

<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">

ADD HTML FOR EXTRA SECTION HERE
</div>

Claromentis v9+

<div aria-multiselectable="true" class="accordion" id="accordion" role="tablist">

ADD HTML FOR EXTRA SECTION HERE
</div>

Below is the HTML code which makes up a section.

For each new section you need to add some unique attributes highlighted below. The easiest way to make the attributes unique is to give it the number of the section (e.g. headingFour for section 4, headingFive for section 5 and so on)

Claromentis v8

<div class="panel panel-default"> 
  <div class="panel-heading" id="headingFour" role="tab"> 
    <h4 class="panel-title"><a aria-controls="collapseFour" aria-expanded="false" data-parent="#accordion" data-toggle="collapse" href="#collapseFour" role="button">Title Four </a></h4> 
  </div> 
  <div aria-labelledby="headingFour" class="panel-collapse collapse" id="collapseFour" role="tabpanel"> 
    <div class="panel-body">Text Content Four</div> 
  </div>
</div>

Claromentis v9+

<div class="card"> 
 <div class="card-header" id="headingFour" role="tab"> 
  <h4 class="mb-0">
   <button aria-controls="collapseFour" aria-expanded="true" class="btn btn-link btn-block text-left" data-parent="#accordion" data-toggle="collapse" href="#collapseFour" role="button">Title Four</button>
  </h4> 
 </div> 
 <div aria-labelledby="headingFour" class="panel-collapse collapse in" id="collapseFour" role="tabpanel"> 
  <div class="card-body">Text Content Four</div> 
 </div> 
</div>

Multiple accordions on the same page

When placing multiple accordions on the same page give each accordion a unique ID. This will ensure that they work as intended:

• Add a new accordion to the page
• update the accordion wrapper ID to something unique e.g.

Claromentis v8

<div aria-multiselectable="true" class="panel-group" id="accordionTwo"  role="tablist">

Claromentis v9+

<div aria-multiselectable="true" class="accordion" id="accordionTwo"  role="tablist">

• update the 'data-parent' value on each panel title with the ID e.g.

Claromentis v8

<h4 class="panel-title">
   <a aria-controls="collapseTwoOne" aria-expanded="false" data-parent="#accordionTwo" data-toggle="collapse" href="#collapseTwoOne" role="button">Title Two One </a>
</h4>

Claromentis v9+

<h4 class="mb-0">
 <button aria-controls="collapseTwoOne" aria-expanded="false" data-parent="#accordionTwo" class="btn btn-link btn-block text-left" data-toggle="collapse" href="#collapseTwoOne" role="button">Title One </button>
</h4>

• Ensure each section of the new accordion uses unique IDs not used in the existing accordion/s e.g. the IDs "headingOne" and "collapseOne"  (see above) could be renamed as "headingTwoOne" and "collapseTwoOne" in the new accordion

Collapse all sections on page load

The default example above displays with the first section expanded but if you wish for it to be collapsed on page load then carry out the following steps.

In Section One replace:

aria-expanded="true false"

and remove:

class="panel-collapse collapse in"