Collapsible Panels

HL Plugins / Collapsible Panels

Collapsible Panels

By For Higher Logic Sites and Communities

Break long content into expandable sections that open and close independently.

Collapsible Panels turns heading-divided content into interactive, expandable sections. Each section can be opened or closed independently — so visitors can expand multiple sections at once and see the content they care about side by side.

Great for FAQs, resource libraries, documentation, program details, or any long page where users want to focus on specific sections.

See it in action

Click any of the section headings below to expand or collapse that section. You can open as many as you like at the same time.

   

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 collapsible panels

  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 collapsible section. Everything between one heading and the next becomes the content of that section.
  3. Add the CSS Wrapper Class Name matching your heading level:
    • theme-logic-collapse-h2 — if you're using <h2> headings
    • theme-logic-collapse-h3 — if you're using <h3> headings
    • theme-logic-collapse-h4 — if you're using <h4> headings
  4. Save and publish. Each heading becomes a clickable bar. Clicking it expands or collapses the content beneath.

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. Any bolded heading will start in the expanded state.

You can have as many sections start open as you want — or none.

Choosing your heading level

Pick the heading level based on your content hierarchy:

  • Use h2 if your collapsible sections are the primary structure of the page
  • Use h3 if your sections sit inside a larger page structure with its own h2s
  • Use h4 for deeply nested content

Mixing heading levels inside a single widget won't work the way you'd expect — stick to one level per widget.

Good to know

Each section is independent. Opening one section doesn't close the others. If you want the "one at a time" behavior, use the Accordions plugin instead.

Content between headings is grouped automatically. Everything from one heading to the next — paragraphs, lists, images, embedded media — becomes part of that section.

Content before the first heading stays visible. If you put text above the first heading, it will display normally and won't be part of any collapsible section. Useful for intro content.

Multiple widgets on the same page. You can have several collapsible-panel widgets on the same page, each with its own sections.

Works with any content. Each section can contain anything — text, images, embedded video, other plugins (Easy Buttons work great inside collapsible sections).

Not sure which to use?

Collapsible Panels and Accordions look similar but behave differently:

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

If in doubt, start with Collapsible Panels — users tend to prefer the freedom to expand multiple sections.

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 →