Accordions

​
​

​Accordions in Tile & Simple Design

​​​​​Accordions can be used to hide content behind toggleable areas of the page. Accordions are great to use for pages like FAQs. 

The code for accordions is different between Bootstrap 3 (Tile and Simple) and Bootstrap 4 (Next). 

To add an accordion to a Tile o​​​​r Simple site page, follow these s​​teps:

  1. Open your page for editing.
  2. Place your cursor on the page where you want your accordion to appear.
  3. Open the "Format Text" tab, and choose "Edit Source"
  4. For each accordion you want to add to the page, paste the following code in the Edit Source panel:
    <div class="accordion-container">
    <a class="accordion-toggle" href="#">Accordion Title<span class="toggle-icon"><i class="fa fa-plus"></i></span></a>
             <div class="accordion-content">
                <p>Accordion Content</p>
             </div>
    </div>​
  5. ​Replace the text for "Accordion Title" and "Accordion Content" to fit what you want the ​accordion to say.

To add an accordi​​on to a Next site page, follow these steps:

  1. Open your page for editing.
  2. Place your cursor on the page where you want your accordion to appear.
  3. Open the "Format Text" tab, and choose "Edit Source"
  4. The entire accordion section must be wrapped in a div class code. Use the following code at the top and closed at the bottom:
    <div class="accordion" id="accordionExample">​
    Insert sample code from #5 here
    </div>
  5. For each accordion section you want to add, paste the following code in the Edit Source panel:
    <div class="card">
    <div class="card-header" id="headingOne">
      <h4 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Title​</button>
      </h4>
    </div>
      <div id="collapseOne" class="collapse show" a​ria-labelledby="headingOne" data-parent="#accordionExample"​>
    <div class="car-body">
    <p>Accordion hidden content goes here</p>
    ​</div>
      </div>​
    </div>
  6. Replace the headingOne text related to the content and must be unique to each individual accordion section. ​
  7. Replace the text for "Accordion Title" and "Accordion content" to fit what you want the accordion to say.

If you need more than plain text in the Accordion Content, you can build it out on the page with the WYSIWYG editor, select it in the Edit Source, and paste it into the Accordion Content area. If you do this, it is best to remove the preceding <p> and trailing </p> to the Accordion Content.

If you need to build out a long list of Accordions, the fastest way to build these out is to use this Accordion Builder Excel spreadsheet. The formula in Column C will automate filling in the title and body content from columns A and B. Once filled in, copy the contents of Column C and paste it into "Edit Source" on your page.

One thing to note, the formatting in the Excel spreadsheet is not as robust as if you built each accordion by hand. You may need to go back and enhance the formatting after it is in SharePoint.​



​Accordions in NEXT Design

Accordions in NEXT Design are built on bootstrap v5.3 using a numerical sequence. The first accordion will always default as accordionOne, with each subsequent accordion noted as its numerical value. The parent of each subsequent accordion will be noted as accordionOne, as they derive and will functionally 'drop down' using numerical sequence logic. 

While there is no limit to the number of accordions an author can create - some agencies have used over twenty - please be mindful that accordions should be used diligently and when absolutely necessary. To create additional accordion​s, the noted accordion ​value needs to change for its numerical placement in the sequence. The numerical value needs to be explicitly written out as plain text, e.g accordionThirteen not accordion13. 

To example, the below HTML code notes which values must change when populating additional accordions:

<div class="accordion" id="accordionOne">​
<div class="accordion-item">
<h2 class="accordion-header"> 
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Accordion One</button></h2> 
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionAlpha">
<div class="accordion-body">This is example text</div>
</div>
</div>
<div class="accordion-item">​​
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Two</button></h2>
<div id="collapseTwo​" class="accordion-collapse collapse" data-bs-parent="#accordionOne">
<div class="accordion-body">This is sample text</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button"​ data-bs-toggle="collapse" data-bs-target="#collaps​​eThree" aria-expanded="false" aria-controls="collapseThree">Accordion Three</button></h2>
<div id="collapseThree​" class="accordion-collapse collapse" data-bs-parent="#accordionOne">
<div class="accordion-body">This is sample text<br/></div>
</div>
</div>
</div>

​

Reusable Content​

If accordion code is used on both a webpage and within reusable content to e.g populate a left navigation list, the numerical value sequencing will apply to both. In this case, ​an example of numerical values not defined properly results in both accordionOne for the web page and in reusable content opening at the same time. 
accordionexample.png

To prevent this, build out reusable content web parts first, and then populate accordions directly on the page. Thereafter, accordions built on the web page will carry off from the numerical sequence used in reusable content. Providing an example, if the last accordion used within reusable content ends with accordionThree, the first accordion on the web page must start as accordionFour, with each subsequent accordion deriving its value off of its parent, accordionFour.​