Accordions

​
​

​

​​​​​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.​


​