Collapse Since v1.1.0+

Collapse panels can be used to create content areas that can be opened and closed (by clicking on the header). Collapse panels in Halfmoon require no JavaScript, thanks to the use of the <details> and <summary> tags.

Why are computers important?
Computers are important because they are like bicycles for the mind.
What is the most efficient animal?
The condor is the most efficient animal, whereas human beings have a rather unimpressive showing. Given a bicycle however, human beings become far more efficient, easily topping the chart, blowing the condor away. 
<!-- First collapse panel -->
<details class="collapse-panel w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
  <summary class="collapse-header">
    Why are computers important?
  </summary>
  <div class="collapse-content">
    Computers are important because they are like bicycles for the mind.
  </div>
</details>

<!-- Second collapse panel (open by default) -->
<details class="collapse-panel w-400 mw-full mt-20" open> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100%, mt-20 = margin-top: 2rem (20px) -->
  <summary class="collapse-header">
    What is the most efficient animal?
  </summary>
  <div class="collapse-content">
    The condor is the most efficient animal, whereas human beings have a rather unimpressive showing. Given a bicycle however, human beings become far more efficient, easily topping the chart, blowing the condor away.
  </div>
</details>

How it works

Here's a list of things to understand about collapse panels in Halfmoon.

  • The <summary> element (with the .collapse-header class) must be placed inside the <details> element (with the .collapse-panel class).
  • The content should be placed in a container with the class .collapse-content, and this container should also be placed inside the <details> element. The content can be opened/closed by clicking on the header.
  • Collapse panels are block level elements and take up the full width of their containers. However, their widths can be manually adjusted using sizing utilities (opens in new tab), as can be seen in the above example.
  • The collapse panel with the open attribute will be open when the page loads.

Collapse group #

Collapse panels can also be grouped together by placing them inside a container with the class .collapse-group. Everything else mentioned above is the same for the individual collapse panels.

Plain White T-Shirt
Price: $20.00
A long description that lists all the good sides of the product and none of the bad. Compels the shopper to add this product to their cart immediately.
Cool Jeans
Price: $41.00
A long description that lists all the good sides of the product and none of the bad. Compels the shopper to add this product to their cart immediately.
Plain White Crop Top
Price: $20.00
A long description that lists all the good sides of the product and none of the bad. Compels the shopper to add this product to their cart immediately. 
<!-- Collapse group -->
<div class="collapse-group w-500 mw-full"> <!-- w-500 = width: 50rem (500px), mw-full = max-width: 100% -->
  <!-- First collapse panel (open by default) -->
  <details class="collapse-panel" open>
    <summary class="collapse-header">
      <strong>Plain White T-Shirt</strong>
      <br />
      <span class="text-muted">Price: $20.00</span>
    </summary>
    <div class="collapse-content">
      A long description that lists all the good sides of the product and none of the bad. Compels the shopper to add this product to their cart immediately.
    </div>
  </details>

  <!-- Second collapse panel -->
  <details class="collapse-panel">
    <summary class="collapse-header">
      <strong>Cool Jeans</strong>
      <br />
      <span class="text-muted">Price: $41.00</span>
    </summary>
    <div class="collapse-content">
      A long description that lists all the good sides of the product and none of the bad. Compels the shopper to add this product to their cart immediately.
    </div>
  </details>

  <!-- Third collapse panel -->
  <details class="collapse-panel">
    <summary class="collapse-header">
      <strong>Plain White Crop Top</strong>
      <br />
      <span class="text-muted">Price: $20.00</span>
    </summary>
    <div class="collapse-content">
      A long description that lists all the good sides of the product and none of the bad. Compels the shopper to add this product to their cart immediately.
    </div>
  </details>
</div>

Hidden when open or closed #

The following classes are available for hiding elements (setting the display: none property), depending on whether the collapse panel is open or closed:

  • The class .hidden-collapse-open hides the element when the collapse panel is open.
  • The class .hidden-collapse-closed hides the element when the collapse panel is closed.

The above classes are best used inside the headers (.collapse-header), because the content (.collapse-content) is only shown when the panel is open anyway.

This panel is closed This panel is open
It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. 
<details class="collapse-panel w-400 mw-full" open> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
  <summary class="collapse-header">
    <span class="hidden-collapse-open">This panel is closed</span>
    <span class="hidden-collapse-closed">This panel is open</span>
  </summary>
  <div class="collapse-content">
    It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned.
  </div>
</details>

Without icon #

An arrow icon is automatically added to the collapse header to show the user if it is open or not. This can be removed by adding the class .without-arrow to the collapse header (.collapse-header). This along with the classes described in the above section can be used to create custom visual cues that tell the user whether the collapse panel is open or not.

What was King Aragorn's tax policy?
Click to see answer Click again to close
Such a question simply misunderstands Tolkien's work, and for that reason, it can not be answered. Tolkien's fiction is of universal values from the dawn of mankind. Martin is writing a grounded story with a fantasy setting.
+ − Did Rohan come to Gondor's aid?
When the pyre of the white city was lit, the horse lords of Rohan banded together under King Theoden (not Aragorn, last I checked) and came to Gondor's aid. 
<!-- First collapse panel without arrow -->
<details class="collapse-panel w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
  <summary class="collapse-header without-arrow">
    What was King Aragorn's tax policy?
    <br />
    <span class="hidden-collapse-open text-muted">Click to see answer</span>
    <span class="hidden-collapse-closed text-muted">Click again to close</span>
  </summary>
  <div class="collapse-content">
    Such a question simply misunderstands Tolkien's work, and for that reason, it can not be answered. Tolkien's fiction is of universal values from the dawn of mankind. Martin is writing a grounded story with a fantasy setting.
  </div>
</details>

<!-- Second collapse panel without arrow (open by default) -->
<details class="collapse-panel w-400 mw-full mt-20" open> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100%, mt-20 = margin-top: 2rem (20px) -->
  <summary class="collapse-header without-arrow">
    <span class="hidden-collapse-open text-muted">&plus;</span>
    <span class="hidden-collapse-closed text-muted">&minus;</span>
    <span class="ml-5">Did Rohan come to Gondor's aid?</span> <!-- ml-5 = margin-left: 0.5rem (5px) -->
  </summary>
  <div class="collapse-content">
    When the pyre of the white city was lit, the horse lords of Rohan banded together under King Theoden (not Aragorn, last I checked) and came to Gondor's aid.
  </div>
</details>

Notes on browser compatibility #

As of August of 2020, the <details> and <summary> tags have a global usage total of 95% according to Can I use . This means that this component can be used with relative confidence because it is supported by most of the browsers in use today. However, it is still not 100% and that should be kept in mind.

Internet Explorer

The <details> and <summary> tags are not supported in Internet Explorer 11. For this reason, collapse panels will not work as expected on that browser. However, it is important to note that the content will still be rendered properly, but the collapse panels will always be open. This means that users will still be able to view all of the content on the page, but the collapse component will lose its main functionality — its collapsibility.

Another minor thing to remember is that for collapse panels that are not open, ie, they don't have the open attribute, elements with the class .hidden-collapse-closed are given the display: inline-block property. This is because collapse panels are always open on IE11 (as mentioned above).

The component can still be used without much issue (since it renders properly), but this should at least be kept in mind. You can learn more about Internet Explorer compatibility in the support docs section (opens in new tab).

Up next: Dropdown
On this page
Collapse Collapse group Hidden when open or closed Without icon Notes on browser compatibility

Help us grow

Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.

However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.

Gold sponsor

The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)

Sponsors

The following is the normal tier, with a maximum of 10 sponsors.

Backers

The following people have generously decided to support Halfmoon.

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.
halfmoon-logo halfmoon-logo-white

Get in touch

Legal

Made with for developers

Scroll to top
© Copyright 2025, Halfmoon UI