Tailwind CSS Collapse

Basic example

The collapse od used in the accordion component to make it fold and unfold.

HTML
javascript

        
            
      <a
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-collapse-init
        data-twe-ripple-init
        data-twe-ripple-color="light"
        href="#collapseExample"
        role="button"
        aria-expanded="false"
        aria-controls="collapseExample">
        Link with href
      </a>
      <button
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        type="button"
        data-twe-collapse-init
        data-twe-ripple-init
        data-twe-ripple-color="light"
        data-twe-target="#collapseExample"
        aria-expanded="false"
        aria-controls="collapseExample">
        Button with data-twe-target
      </button>

      <div
        class="!visible hidden text-center"
        id="collapseExample"
        data-twe-collapse-item>
        Some placeholder content for the collapse component. This panel is
        hidden by default but revealed when the user activates the relevant
        trigger.
      </div>

        
            
      // Initialization for ES Users
      import {
        Collapse,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Collapse, Ripple });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Horizontal

Use the [data-twe-collapse-horizontal] attribute to transition the width instead of height and set a width on the immediate child element.

HTML
javascript

        
            
      <button
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        type="button"
        data-twe-collapse-init
        data-twe-target="#collapseWidthExample"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        aria-expanded="false"
        aria-controls="collapseWidthExample">
        Toggle width collapse
      </button>
      <div
        class="!visible hidden"
        data-twe-collapse-item
        data-twe-collapse-horizontal
        id="collapseWidthExample">
        <div>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Collapse,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Collapse, Ripple });

Multiple targets

Hide multiple elements by referencing them with a selector in its href or data-twe-target attribute. Multiple button or a can show and hide an element if they each reference it with their href or data-twe-target attribute.

Toggle first element

HTML
javascript

        
            
      <a
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-collapse-init
        data-twe-ripple-init
        data-twe-ripple-color="light"
        href="#multiCollapseExample1"
        role="button"
        aria-expanded="false"
        aria-controls="multiCollapseExample1"
        >Toggle first element</a
      >
      <button
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        type="button"
        data-twe-collapse-init
        data-twe-target="#multiCollapseExample2"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        aria-expanded="false"
        aria-controls="multiCollapseExample2">
        Toggle second element
      </button>
      <button
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        type="button"
        data-twe-collapse-init
        data-twe-target=".multi-collapse"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        aria-expanded="false"
        aria-controls="multiCollapseExample1 multiCollapseExample2">
        Toggle both elements
      </button>

      <div class="mt-4 grid gap-4 md:grid-cols-2">
        <div>
          <div
            class="multi-collapse !visible hidden"
            data-twe-collapse-item
            id="multiCollapseExample1">
            <div>
              Some placeholder content for the first collapse component of this
              multi-collapse example. This panel is hidden by default but
              revealed when the user activates the relevant trigger.
            </div>
          </div>
        </div>
        <div>
          <div
            class="multi-collapse !visible hidden"
            data-twe-collapse-item
            id="multiCollapseExample2">
            <div>
              Some placeholder content for the second collapse component of this
              multi-collapse example. This panel is hidden by default but
              revealed when the user activates the relevant trigger.
            </div>
          </div>
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Collapse,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Collapse, Ripple });

With Scroll

Use custom styles with specified height to see content with scrollbar.

Longer content

HTML
javascript

        
            
      <a
        class="mx-auto inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-collapse-init
        data-twe-ripple-init
        data-twe-ripple-color="light"
        href="#collapseWithScrollbar"
        role="button"
        aria-expanded="false"
        aria-controls="collapseWithScrollbar">
        Longer content
      </a>

      <div
        class="!visible mx-auto mt-4 hidden max-h-24 overflow-y-auto"
        data-twe-collapse-item
        id="collapseWithScrollbar"
        style="max-width: 500px">
        <p>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
          excepteur butcher vice lomo. Leggings occaecat craft beer
          farm-to-table, raw denim aesthetic synth nesciunt you probably haven't
          heard of them accusamus labore sustainable VHS. 3 wolf moon officia
          aute, non cupidatat skateboard dolor brunch. Food truck quinoa
          nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
          bird on it squid single-origin coffee nulla assumenda shoreditch et.
        </p>
      </div>

        
            
      // Initialization for ES Users
      import {
        Collapse,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Collapse, Ripple });

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Collapse, initTWE } from "tw-elements";
        initTWE({ Collapse });

        
            
        import "tw-elements";

Usage

Via data attributes

Just add data-twe-collapse-init and a data-twe-target to the element to automatically assign control of one or more collapsible elements. The data-twe-target attribute accepts a CSS selector to apply the collapse to. For ES format, you must first import and call the initTWE method.

HTML

        
            
        <a
          class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
          data-twe-collapse-init
          data-twe-ripple-init
          data-twe-ripple-color="light"
          href="#collapseExample"
          role="button"
          aria-expanded="false"
          aria-controls="collapseExample">
          Link with href
        </a>
        <button
          class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
          type="button"
          data-twe-collapse-init
          data-twe-ripple-init
          data-twe-ripple-color="light"
          data-twe-target="#collapseExample"
          aria-expanded="false"
          aria-controls="collapseExample">
          Button with data-twe-target
        </button>

        <div
          class="!visible hidden text-center"
          id="collapseExample"
          data-twe-collapse-item>
          Some placeholder content for the collapse component. This panel is
          hidden by default but revealed when the user activates the relevant
          trigger.
        </div>

Via JavaScript

javascript
umd

ES UMD

        
            
        const collapseElementList = [].slice.call(document.querySelectorAll('[data-twe-collapse-item]'))
        const collapseList = collapseElementList.map((collapseEl) => {
          return new Collapse(collapseEl, {
            toggle: false,
          });
        });

        
            
        const collapseElementList = [].slice.call(document.querySelectorAll('[data-twe-collapse-item]'))
        const collapseList = collapseElementList.map((collapseEl) => {
          return new twe.Collapse(collapseEl, {
            toggle: false,
          });
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-parent="".

Name	Type	Default	Description
`parent`	selector \| jQuery object \| DOM element	`false`	If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area.
`toggle`	boolean	`true`	Toggles the collapsible element on invocation.

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-twe-class, as in data-twe-class-visible="".

Name	Default	Description
`visible`	!visible	Sets visibility styles to the collapsible element.
`hidden`	hidden	Sets display styles to the collapsible element.
`baseTransition`	overflow-hidden duration-[350ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none	Sets base transition styles to the collapsible element.
`collapsing`	h-0 transition-[height] overflow-hidden duration-[350ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none	Sets transition styles to the collapsible element.
`collapsingHorizontal`	w-0 h-auto transition-[width] overflow-hidden duration-[350ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none	Sets transition styles to the collapsible horizontal element.

Methods

Asynchronous methods and transitions:
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Activates your content as a collapsible element. Accepts an optional options object.

You can create a collapse instance with the constructor, for example:

Method	Description	Example
`toggle`	Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the `shown.twe.collapse` or `hidden.twe.collapse` event occurs).	`myCollapse.toggle()`
`show`	Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (e.g., before the `shown.twe.collapse` event occurs).	`myCollapse.show()`
`hide`	Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (e.g., before the `hidden.twe.collapse` event occurs).	`myCollapse.hide()`
`dispose`	Destroys an element's collapse.	`myCollapse.dispose()`
`getInstance`	Static method which allows you to get the alert instance associated to a DOM element.	`Collapse.getInstance()`
`getOrCreateInstance`	Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized.	`Collapse.getOrCreateInstance()`

javascript
umd

ES UMD

        
                   
        const myCollapseEl = document.getElementById('myCollapse')
        const myCollapse = new Collapse(myCollapseEl)
        myCollapse.show();

        
            
        const myCollapseEl = document.getElementById('myCollapse')
        const myCollapse = new twe.Collapse(myCollapseEl)
        myCollapse.show();

Events

Event type	Description
`show.twe.collapse`	This event fires immediately when the `show` instance method is called.
`shown.twe.collapse`	This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
`hide.twe.collapse`	This event is fired immediately when the `hide` method has been called.
`hidden.twe.collapse`	This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

JavaScript

        
            
        const myCollapseEl = document.getElementById('myCollapse')
        myCollapseEl.addEventListener('hidden.twe.collapse', () => {
          // do something...
        });

Collapse

Basic example

Horizontal

Multiple targets

With Scroll

Collapse - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events

Access restricted

To view this section you must have an active PRO account

Collapse

Tailwind CSS Collapse

Basic example

Horizontal

Multiple targets

With Scroll

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Collapse - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events