Accordions

HL Plugins / Accordions

Accordions

By For Higher Logic Sites and Communities

Expandable content sections with a focused, one-at-a-time reading experience.

The Accordions plugin turns heading-divided content into expandable sections where only one section is open at a time. Opening a new section automatically closes the previous one — keeping the view clean and focused.

Great for step-by-step guides, sequential processes, product tiers, or anywhere you want visitors to read one thing before moving to the next.

See it in action

Click any of the section headings below to expand it. Notice how opening a new section automatically closes the one that was open before.

   

Lorem ipsum dolor sit amet

consectetur adipiscing elit. Suspendisse ut ligula ligula. Mauris sollicitudin lacinia leo, luctus faucibus nunc tincidunt et. Praesent a mauris non mi tristique facilisis at at odio. Vivamus pharetra pellentesque est. Suspendisse quis mollis dui. Suspendisse ac egestas tellus, id luctus nibh. Nulla sit amet orci posuere, molestie eros et, malesuada felis. Proin sit amet tincidunt dui. Mauris placerat at dui eu bibendum. Sed vel neque sed metus ultrices pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam rhoncus suscipit rhoncus. Morbi posuere quam eget tortor auctor, eget scelerisque est viverra.

Curabitur tempus at ligula vel vulputate

In hac habitasse platea dictumst. Mauris rhoncus, massa eu pulvinar semper, quam ante ullamcorper lacus, ut egestas mauris nisi sed eros. Morbi a sem eu elit viverra blandit. Nulla imperdiet nisl eu posuere pretium. Pellentesque molestie viverra pellentesque.

Praesent ultrices molestie ipsum non sollicitudin:

  • Sed luctus tincidunt odio, quis malesuada dui vehicula id. Morbi
  • Vitae dignissim lacus. In quam justo, condimentum aliquet lobortis vitae
  • Feugiat non sem. Nulla facilisi. Duis vel interdum orci
  • Nulla sed leo nec ex accumsan rutrum id sit amet quam.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam tempus diam et commodo imperdiet. Quisque iaculis quis nunc quis porttitor.

Sed varius, felis nec aliquet eleifend

Opsum eros vestibulum mi, vitae fermentum enim purus vel nunc. Aliquam mollis porta sapien et molestie. Nullam venenatis ante sit amet eros malesuada, sit amet congue metus suscipit. Phasellus laoreet porttitor sem, et sodales tortor aliquet nec. Praesent quis ante bibendum, mattis lacus ac, euismod odio. Fusce imperdiet vitae lorem eu sollicitudin. Cras eget nunc quis libero euismod laoreet non et nibh.

Aenean placerat, urna at vestibulum

ultricies, metus neque bibendum nisi, a tristique turpis mi nec ligula. Mauris faucibus eget augue at aliquet. Aenean et enim augue. Etiam venenatis elit vel nisi tempor, et sodales purus malesuada. Praesent vestibulum justo ex.

Non vulputate eros condimentum nec. Praesent fringilla erat in urna luctus, eget iaculis odio sagittis. Donec odio ante, semper nec quam ut, pharetra mollis eros. Nullam semper quam. nec tempus efficitur

Nunc posuere interdum magna

Phasellus mi velit, rutrum in congue at, lacinia bibendum odio. Morbi sed mauris nibh. Vestibulum aliquet mollis urna ac vulputate. Fusce id viverra dolor. Integer consectetur vulputate mauris, quis sollicitudin est vulputate et. Mauris et sapien maximus, sodales erat id, consectetur odio. Integer ut auctor sapien. Proin rhoncus, sapien eget vehicula mollis, enim diam porta mi, sed cursus odio.

ulla volutpat leo

How to create an accordion

  1. Add an HTML widget to your page.
  2. Structure your content with headings. Decide what heading level will divide your sections — <h2>, <h3>, or <h4>. Every heading at that level becomes a new accordion section.
  3. Add the CSS Wrapper Class Name matching your heading level:
    • theme-logic-accordion-h2 — if you're using <h2> headings
    • theme-logic-accordion-h3 — if you're using <h3> headings
    • theme-logic-accordion-h4 — if you're using <h4> headings
  4. Save and publish. Each heading becomes a clickable bar. Clicking it opens that section and closes any other open section.

Options

Start a section open by default

To have a specific section open when the page loads, bold the heading of that section in the HL editor.

Since only one section can be open at a time, bolding multiple headings will still result in just the first bolded section being open on load.

Choosing your heading level

Same guidance as Collapsible Panels:

  • Use h2 if your accordion is the primary structure of the page
  • Use h3 if it sits inside a larger structure
  • Use h4 for deeply nested content

Stick to one heading level per widget for predictable behavior.

Good to know

Only one section open at a time. This is the defining behavior. If you want multiple sections open simultaneously, use Collapsible Panels instead.

Clicking an open section closes it. Accordions don't have to have any section open — clicking the currently open section's heading will close it, leaving all sections collapsed.

Content between headings is grouped automatically. Just like Collapsible Panels.

Content before the first heading stays visible. Useful for intro text that should always be visible.

Multiple accordions on the same page work independently. Each accordion widget manages its own open/closed state.

Not sure which to use?

Accordions and Collapsible Panels look similar but behave differently:

Accordions Collapsible Panels
Multiple sections open at once? No Yes
Opening a section closes others? Yes No
Best for Step-by-step guides, focused reading Reference content, FAQs, resources

If you want visitors to focus on one thing at a time, use Accordions. If you want them to compare content across sections, use Collapsible Panels.

Ready to use this plugin?

If you haven't installed the plugin library on your HL site yet, you can request access and set it up in under five minutes. It's a quick one-time setup.

Get started

Feedback welcome

Found a bug? Have a suggestion to make this plugin better? We'd love to hear it.

justin@themelogic.com

Need something custom?

Need this plugin to behave differently, or want a custom plugin built specifically for your site? We offer custom plugin development.

justin@themelogic.com

HL Plugins are provided under the Theme Logic Proprietary Use License. Use of these files constitutes acceptance of the license terms. View license →