Creating an Accordion

Accordion Code Snippet:

Edit the page where you want to add the accordion, the code snippet must be added in the "Source code"

Is best editing the content within the source code to prevent removing needed code.

location of Cascade editor source code editor

Example of an accordion with 2 tabs

<!-- Beginning of accordion -->
<ul class="accordion" data-accordion="" data-allow-all-closed="true" data-multi-expand="true">
  <!-- first tab -->
  <li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel1a">Title of first accordion tab</a>
    <div id="panel1a" class="accordion-content" data-tab-content="">
      <p>Content goes here.</p>
    </div>
  </li>
  <!-- end of first tab -->
  <!-- second tab -->
  <li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel2a">Title of second accordion tab</a>
    <div id="panel2a" class="accordion-content" data-tab-content="">
      <p>Content goes here.</p>
    </div>
  </li>
  <!-- end of second tab -->
</ul>
<!-- end of accordion -->

If more tabs are needed continue adding the following code within the </ul> tag

<!-- more tabs -->
<li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel3a">Title of accordion tab</a>
    <div id="panel3a" class="accordion-content" data-tab-content="">
        <p>Content of accordion</p>
    </div>
</li>

NOTE: the incremental of tabs #panel3a

Example of an accordion with 5 tabs​​

<!-- Beginning of accordion -->
<ul class="accordion" data-accordion="" data-allow-all-closed="true" data-multi-expand="true">
  <!-- first tab -->
  <li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel1a">Title of first accordion tab</a>
    <div id="panel1a" class="accordion-content" data-tab-content="">
      <p>Content goes here.</p>
    </div>
  </li>
  <!-- end of first tab -->
  <!-- second tab -->
  <li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel2a">Title of second accordion tab</a>
    <div id="panel2a" class="accordion-content" data-tab-content="">
      <p>Content goes here.</p>
    </div>
  </li>
  <!-- end of second tab -->
<!-- more tabs -->
<li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel3a">Title of accordion tab</a>
    <div id="panel3a" class="accordion-content" data-tab-content="">
        <p>Content of accordion</p>
    </div>
</li>
<!-- more tabs -->
<li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel4a">Title of accordion tab</a>
    <div id="panel4a" class="accordion-content" data-tab-content="">
        <p>Content of accordion</p>
    </div>
</li>
<!-- more tabs -->
<li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel5a">Title of accordion tab</a>
    <div id="panel5a" class="accordion-content" data-tab-content="">
        <p>Content of accordion</p>
    </div>
</li>
</ul>
<!-- end of accordion -->

Adding Expand All / Collapse All

Expand All | Collapse All above accordion block

Why Add Expand All / Collapse All

Being able to Expand All to an accordion is useful because it ensures a 'Find on Page' searches within all the text on the page. Any text within a collapsed accordion item will not be found in a 'Find on Page' search.

Step 1 - Add Custom Javascript

Add the following source code in the file site.js. Location of file: site folder -> _assets -> custom -> scripts -> site.js

demonstration on navigation to the file site.js in Cascade

Edit the file site.js and paste

/* Button Expand */
$(document).ready(function(){
    $('#expand-sections').click(function(e) {
        e.preventDefault();
        $('.accordion').foundation('down', $('.accordion-content'), true);
        $('.accordion-title').attr('aria-expanded', true);
    });
    
    $('#collapse-sections').click(function(e) {
        e.preventDefault();
        $('.accordion').foundation('up', $('.accordion-content'));
        $('.accordion-title').attr('aria-expanded', false);
    });    
});

Example

example of adding JavaScipt code into the site.js file

Step 2 - Point to site.js in Site Settings

Edit the _site-settings

Cascade site settings block

Find "JavaScript Settings" and select "Internal Script" under the Javascript Type. Save _site-settings.

selecting the Internal Script in the site settings in Cascade

Step 3 - Add the Expand All Code Block

Add the following code block above your accordion. 

<p><a href="#" id="expand-sections">Expand All</a> | <a href="#" id="collapse-sections">Collapse All</a></p>

 

The final code should look something like...

<p><a href="#" id="expand-sections">Expand All</a> | <a href="#" id="collapse-sections">Collapse All</a></p>
<!-- Beginning of accordion -->
<ul class="accordion" data-accordion="" data-allow-all-closed="true" data-multi-expand="true">
  <!-- first tab -->
  <li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel1a">Title of first accordion tab</a>
    <div id="panel1a" class="accordion-content" data-tab-content="">
      <p>Content goes here.</p>
    </div>
  </li>
  <!-- end of first tab -->
  <!-- second tab -->
  <li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#panel2a">Title of second accordion tab</a>
    <div id="panel2a" class="accordion-content" data-tab-content="">
      <p>Content goes here.</p>
    </div>
  </li>
  <!-- end of second tab -->
</ul>
<!-- end of accordion -->

 

Was this helpful?
33% helpful - 3 reviews

Details

Article ID: 41569
Created
Fri 10/27/17 5:25 PM
Modified
Mon 7/6/20 2:37 PM