Tailwind CSS Collapse

Class Name	Type	Description
collapse	Component	The class for the collapse container which contains content.
collapse-toggle	Component	Class for button.
collapse-open:{tw-utility-class}	Modifier	Modifies tailwind classes when the collapse menu is open.

Basic example

Default

This basic example of collapse component.

<button type="button" class="collapse-toggle btn btn-primary" id="basic-collapse" aria-expanded="false" aria-controls="basic-collapse-heading" data-collapse="#basic-collapse-heading">
  Collapse
  <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>
<div id="basic-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-collapse">
  <div class="border-base-content/25 mt-3 rounded-md border p-3">
    <p class="text-base-content/80">
      The collapsible body remains concealed by default until the collapse plugin dynamically adds specific classes. These classes are instrumental in styling each element, dictating the overall appearance, and managing visibility through CSS transitions.
    </p>
  </div>
</div>

Illustrations

Background

The collapse container features a background color.

<button type="button" class="collapse-toggle btn btn-primary" id="shadow-collapse" aria-expanded="false" aria-controls="shadow-collapse-heading" data-collapse="#shadow-collapse-heading" >
  Collapse
  <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>
<div id="shadow-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="shadow-collapse" >
  <div class="bg-primary/20 mt-3 rounded-md p-3">
    <p class="text-primary">
      The collapsible body remains concealed by default until the collapse plugin dynamically adds specific classes.
      These classes are instrumental in styling each element, dictating the overall appearance, and managing visibility
      through CSS transitions.
    </p>
  </div>
</div>

Below example show how can we use collapse inside a dropdown.

Please refer the Dropdown documentation for more details.

<div class="dropdown relative inline-flex [--auto-close:inside] rtl:[--placement:bottom-end]">
  <button id="dropdown-collapse" type="button" class="dropdown-toggle btn btn-primary" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    Actions
    <span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
  </button>
  <div class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-collapse">
    <div class="dropdown-header">Quick Actions</div>
    <div><a class="dropdown-item" href="#">Send Newsletter</a></div>
    <div><a class="dropdown-item" href="#">View Purchases</a></div>
    <div>
      <button id="nested-collapse-2" class="collapse-toggle dropdown-item justify-between" aria-expanded="false" aria-controls="nested-collapse-content" data-collapse="#nested-collapse-content" >
        More Options
        <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
      </button>
      <div class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="nested-collapse-2" id="nested-collapse-content" >
        <ul class="py-3 ps-3">
          <li><a class="dropdown-item" href="#">Download Documents</a></li>
          <li><a class="dropdown-item" href="#">Manage Team Account</a></li>
        </ul>
      </div>
    </div>
    <div><a class="dropdown-item" href="#">Logout</a></div>
  </div>
</div>

Show/Hide

Press the buttons below to toggle the visibility of another element.

<div>
  <h6 class="text-base-content text-base">How can I track my order?</h6>
  <div id="show-hide-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="show-hide-collapse" >
    <p class="text-base-content/80">
      To track your order, simply log in to your account and navigate to the order history section. You'll find detailed
      information about your order status and tracking number there.
    </p>
  </div>
</div>

<button type="button" class="collapse-toggle link link-primary inline-flex items-center" id="show-hide-collapse" aria-expanded="false" aria-controls="show-hide-collapse-heading" data-collapse="#show-hide-collapse-heading" >
  <span class="collapse-open:hidden">Read more</span>
  <span class="collapse-open:block hidden">Read less</span>
  <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 ms-2 size-4"></span>
</button>

Destroy/Reinitialize

new

The destroy method is provided to facilitate the destruction of a collapse element.

<button type="button" class="collapse-toggle btn btn-primary" id="collapse-destroy" aria-expanded="false" aria-controls="collapse-destroy-heading" data-collapse="#collapse-destroy-heading">
  Collapse
  <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>
<div id="collapse-destroy-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="collapse-destroy">
  <div class="border-base-content/25 mt-3 rounded-md border p-3">
    <p class="text-base-content/80">
      The collapsible body remains concealed by default until the collapse plugin dynamically adds specific classes. These classes are instrumental in styling each element, dictating the overall appearance, and managing visibility through CSS transitions.
    </p>
  </div>
</div>

<div class="mt-4 flex gap-3">
  <button class="btn btn-primary" id="destroy-btn">Destroy</button>
  <button class="btn btn-primary" id="reinit-btn" disabled>Reinitialize</button>
</div>

<script>
  window.addEventListener('load', () => {
    ;(function () {
      const collapse = document.querySelector('#collapse-destroy')
      const destroy = document.querySelector('#destroy-btn')
      const reinit = document.querySelector('#reinit-btn')

      destroy.addEventListener('click', () => {
        const { element } = HSCollapse.getInstance(collapse, true)
        element.destroy()

        destroy.setAttribute('disabled', 'disabled')
        reinit.removeAttribute('disabled')
      })

      reinit.addEventListener('click', () => {
        HSCollapse.autoInit()

        reinit.setAttribute('disabled', 'disabled')
        destroy.removeAttribute('disabled')
      })
    })()
  });
</script>

JavaScript behavior

Options

FlyonUI is powered by Preline’s unstyled, headless Tailwind plugins to deliver accessible and responsive user interfaces.

PARAMETERS	DESCRIPTION	OPTIONS	DEFAULT VALUE
`data-collapse`	Collapse the container for the given ID.	string	`null`

Methods

The HSCollapse object exists within the global window object.

METHOD	DESCRIPTION
PUBLIC METHODS
`show()`	Open collapsed item.
`hide()`	Collapse item.
`destroy()`	Destroys the instance, removes generated markup (if any), removes added classes and attributes.
STATIC METHODS
`HSCollapse.getInstance(target)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector).
`HSCollapse.show(target)`	Open collapsed item.
`HSCollapse.hide(target)`	Collapse item.

The method is triggered by the Id of the button. Below, you’ll find example of public methods. To use other methods copy a method from below and paste it into your console, then try clicking the corresponding button to see it in action.

<div class="mb-4 flex gap-3">
  <button type="button" class="btn btn-primary" id="show-btn">Show</button>
  <button type="button" class="btn btn-primary" id="hide-btn">Hide</button>
</div>
<div>
  <button type="button" class="collapse-toggle btn btn-primary" id="method-collapse" aria-expanded="false" aria-controls="method-collapse-heading" data-collapse="#method-collapse-heading" disabled>
    Collapse
    <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
  </button>
  <div id="method-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="method-collapse" >
    <div class="border-base-content/25 mt-3 rounded-md border p-3">
      <p class="text-base-content/80">
        The collapsible body remains concealed by default until the collapse plugin dynamically adds specific classes.
        These classes are instrumental in styling each element, dictating the overall appearance, and managing
        visibility through CSS transitions.
      </p>
    </div>
  </div>
</div>

<script>
  window.addEventListener('load', function () {
    const collapse = new HSCollapse(document.querySelector('#method-collapse'))
    const showBtn = document.querySelector('#show-btn')
    const hideBtn = document.querySelector('#hide-btn')

    showBtn.addEventListener('click', () => {
    collapse.show()
    })
    hideBtn.addEventListener('click', () => {
      collapse.hide()
    })
  })
</script>

Open item (public method).

// This method is used in above example.
const collapse = new HSCollapse(document.querySelector('#method-collapse'));
const showBtn = document.querySelector('#show-btn');

showBtn.addEventListener('click', () => {
  collapse.show();
});

Open item (static method).

const showBtn = document.querySelector('#show-btn');

showBtn.addEventListener('click', () => {
  HSCollapse.show('#method-collapse');
});

Open item (mixed).

const { element } = HSCollapse.getInstance('#method-collapse', true);
const showBtn = document.querySelector('#show-btn');

showBtn.addEventListener('click', () => {
  element.show();
});

Destroy instance

const { element } = HSCollapse.getInstance('#method-collapse', true);
const destroyBtn = document.querySelector('#destroy-btn');

destroyBtn.addEventListener('click', () => {
  element.destroy()
});

Events

METHOD	DESCRIPTION
`on:open`	Called when any item is opened.
`on:hide`	Called when any item is closed.

Event usage

The event is triggered by the ID of the button.

<button type="button" class="collapse-toggle btn btn-primary" id="event-collapse" data-collapse="#event-collapse-heading" aria-expanded="false" aria-controls="event-collapse-heading" >
  Event
  <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>
<div id="event-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="event-collapse" >
  <div class="border-base-content/25 mt-3 rounded-md border p-3">
    <p class="text-base-content/80">
      The collapsible body remains concealed by default until the collapse plugin dynamically adds specific classes.
      These classes are instrumental in styling each element, dictating the overall appearance, and managing visibility
      through CSS transitions.
    </p>
  </div>
</div>

<script>
  window.addEventListener('load', function () {
    const { element } = HSCollapse.getInstance('#event-collapse', true)

    element.on('open', instance => { console.log('open') })
    element.on('hide', instance => { console.log('close') })
  })
</script>

const { element } = HSCollapse.getInstance('#event-collapse', true)

element.on('open', (instance) => {console.log("open")});
element.on('hide', (instance) => {console.log("close")});

FlyonUI