They say that a website page has 3 seconds to catch a visitor's attention, so if your content is text-heavy, chances are that it's just getting skimmed. Give your members a fresh, convenient and engaging user experience with Accordions!

What is an accordion?

Nope, it's not just an instrument. An accordion is a clickable area that advanced users can create to reveal or hide long pieces of text-heavy, but still important content that your members need. No need to have an internal battle on good design vs. vital information. 

What does "advanced users" mean?

When we say advanced users, we're referring to users with some basic HTML knowledge under their belts who aren't afraid to dive into a page's source code. Accordions are not part of the normal page editor, and therefore require some source code manipulation if you'd like to customize how they interact with your content. After you've added accordions to a page, we recommend that all further edits to that page happen in source code. If you aren't comfortable with HTML, we recommend against the use of accordions. 

Long story short: If you make edits to an accordion using the normal page editor, you will likely break your content.

AE Tip: Before making any changes to the code, open the source code (see screenshot below), select all and copy/paste the info into Notepad (not Word). That way, if something gets messed up while you are working you can always grab the previous iteration of code and drop it right back in.

What will the accordion look like?

Collapsed:

Expanded:

How can I set up my first accordion?

(If you already have accordions on your page, make sure you have separation in your source code, such as <p></p> or <div></div> tags, between the first accordion and your new one when following these steps.)

  • Go to the page where you'd like to add an accordion. 
  • Click within the page to bring up the content editor. 
  • Add a header or introduction text above where you'd like your accordion to appear. You may also want to add in the text that will appear below your accordion at this point, to ensure your content is ordered correctly. 
  • When you're ready to create your accordion, click Tools in the toolbar and select the Accordion option.
  • Once you click Accordion, a modal will pop-up enabling you to enter the accordion information: title, content, and whether you would like the default to hide or reveal your text. 
  • Click the Insert button to add the accordion to the page.
  • Then click the green Save button (always save each section you edit!), and you're all set!

How can I edit my accordion or add another?

Once you've setup your first accordion, the best way to edit your content is to dive into the source code. You can access the source code via Tools > Source Code. The source code editor built into the page can be a bit tough to use, so our developers prefer to copy/paste the HTML into their favorite editor (Sublime & Visual Studio Code are a couple of the ones we use) and make the edits there.

Here are some key things to know about editing accordions that will help your edits go smoothly:

1. Each accordion needs to have a unique identifier number

Each accordion has a few different HTML elements that make up its structure - there's a header with the link & toggle for expanding the content, and then there's the content. Each element will have an ID on them, and the numbers should match between all of them so that the elements know which other elements to interact with. If you copy/paste an existing accordion, you'll need to update the numbers for your new accordion in order for things to work correctly.

2. The CSS classes determine if the accordion is open or closed by default

3. Content for the accordion must stay inside the "bootstrap-accordion-content" div

Special thanks to the team at MISBO for their help in developing these tips.

Can I have a copy of your example code?

Sure - feel free to copy/paste our example code below.

<p>This is an example of an already expanded accordion</p>
<div class="panel panel-default bootstrap-accordion">
    <div class="panel-heading" role="tab" id="heading-1560960572816">
        <h4 class="panel-title"><a role="button" class="bootstrap-accordion-title" data-toggle="collapse" data-parent="#accordion" href="#collapse-1560960572816"> Expanded Accordion Example </a></h4>
    </div>
    <div id="collapse-1560960572816" class="panel-collapse in" role="tabpanel" style="height: auto;">
        <div class="panel-body bootstrap-accordion-content">
            <p>This is an accordion that's already expanded</p>
        </div>
    </div>
</div>

<p>This is an example of a collapsed accordion</p>
<div class="panel panel-default bootstrap-accordion">
    <div class="panel-heading" role="tab" id="heading-1560960606849">
        <h4 class="panel-title"><a role="button" class="bootstrap-accordion-title collapsed" data-toggle="collapse"data-parent="#accordion" href="#collapse-1560960606849"> Collapsed Accordion Example </a></h4>
    </div>
    <div id="collapse-1560960606849" class="panel-collapse collapse" role="tabpanel" style="height: 0px;">
        <div class="panel-body bootstrap-accordion-content">
            <p>This is an example of an already collapsed accordion</p>
        </div>
    </div>
</div>

Why is the page jumping when I open or close my accordion?

Your experience as a logged-in admin user with the accordions will differ from your non-admin users since you are seeing the site in "edit" mode. You may experience "jumps" in the page when testing the accordions. We recommend logging out and viewing the page with the accordion to preview how the page will truly appear to your users.

Novi Tip: If you choose to have an accordion default to have text hidden, your content will be hidden behind the accordion unless the member knows that the plus/minus signs allow them to click on it for the full text. Make it known that your information lives within the accordion with a great, informative header or description.

Where can I learn more?

The accordions you can add to Novi AMS are the standard accordions from the Bootstrap library. You can read more in their documentation here - https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion

Can Novi walk me through it?

If you'd like some professional help getting your accordions set up, check out our One on One Workshops and schedule some time with a Novi team member: https://hq.noviams.com/one-on-one-time

Did this answer your question?