Skip to main content
All CollectionsCustomizing Your Website with the Novi CMSNext Level Content
Use Accordions to Organize and Streamline Website Content
Use Accordions to Organize and Streamline Website Content

Learn how to add and edit accordions using HTML on a static webpage to make text-heavy content aesthetically pleasing.

Pete Zimek, CAE avatar
Written by Pete Zimek, CAE
Updated over a year ago

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 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, select the Accordion option.

  • Once you click Accordion, a modal will pop-up enabling you to enter the Accordion Title.

  • Click the Insert button to add the accordion to the page.

  • Next, replace the text inside of the accordion.

  • Then click the green Save button (always save each section you edit!), and you're all set!

How can I add another accordion?

To add a new accordion, 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.

Once you have created space for the new accordion, repeat the steps above to create subsequent accordions.

Tips for Editing Accordions

Make Sure to Close the Accordion Again Before Saving

If you intend to start all your accordions on the page as collapsed with the content hidden, you'll need to click the + plus sign to expand the accordion when you edit.

Remember to click the - minus sign to collapse the accordion again before you save the content section.

This will return the accordion to the proper closed position for your website visitors.

Check That All Content is Closed Within the Div

When adding a large amount of content to an accordion, or a lot of additional HTML inside the accordion (like images, tables, or other advanced content), it's a good idea to check that all the new HTML you've added is safely within the accordion panel div.

Go to Tools > Source Code to see your HTML.

Any accordion content should be between <div class="panel-body bootstrap-accordion-content"> and </div>. Anything that comes after should only be to close the rest of the accordion, like additional </div>s or the final </novi-accordion>.

If any additional HTML is hiding after the </div> for the panel content, it may contribute to any strange behavior you see on the frontend. It's always good to keep your divs clean!

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?