Tailwind CSS Collapse

Use responsive collapse component with helper examples for expand collapse, collappse toggle, collapse animation & more. Free download, open-source license.

Basic example

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

Link with href

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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        data-te-collapse-init
        data-te-ripple-init
        data-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        type="button"
        data-te-collapse-init
        data-te-ripple-init
        data-te-ripple-color="light"
        data-te-target="#collapseExample"
        aria-expanded="false"
        aria-controls="collapseExample">
        Button with data-te-target
      </button>
      <div class="!visible hidden" id="collapseExample" data-te-collapse-item>
        <div
          class="block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 dark:text-neutral-50">
          Some placeholder content for the collapse component. This panel is
          hidden by default but revealed when the user activates the relevant
          trigger.
        </div>
      </div>

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

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Horizontal

Use the [data-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        type="button"
        data-te-collapse-init
        data-te-target="#collapseWidthExample"
        data-te-ripple-init
        data-te-ripple-color="light"
        aria-expanded="false"
        aria-controls="collapseWidthExample">
        Toggle width collapse
      </button>
      <div
        class="!visible hidden rounded-lg shadow-lg"
        data-te-collapse-item
        data-te-collapse-horizontal
        id="collapseWidthExample">
        <div
          class="block w-[300px] max-w-sm rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 dark:text-neutral-50">
          This is some placeholder content for a horizontal collapse. It's
          hidden by default and shown when triggered.
        </div>
      </div>

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

Multiple targets

Hide multiple elements by referencing them with a selector in its href or data-te-target attribute. Multiple button or a can show and hide an element if they each reference it with their href or data-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        data-te-collapse-init
        data-te-ripple-init
        data-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        type="button"
        data-te-collapse-init
        data-te-target="#multiCollapseExample2"
        data-te-ripple-init
        data-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        type="button"
        data-te-collapse-init
        data-te-target=".multi-collapse"
        data-te-ripple-init
        data-te-ripple-color="light"
        aria-expanded="false"
        aria-controls="multiCollapseExample1 multiCollapseExample2">
        Toggle both elements
      </button>
      <div class="grid gap-4 md:grid-cols-2">
        <div>
          <div
            class="multi-collapse !visible hidden rounded-lg shadow-lg"
            data-te-collapse-item
            id="multiCollapseExample1">
            <div
              class="block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 dark:text-neutral-50">
              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 rounded-lg shadow-lg"
            data-te-collapse-item
            id="multiCollapseExample2">
            <div
              class="block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 dark:text-neutral-50">
              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,
        initTE,
      } from "tw-elements";
      
      initTE({ Collapse, Ripple });

With Scroll

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

Longer content

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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        data-te-collapse-init
        data-te-ripple-init
        data-te-ripple-color="light"
        href="#collapseWithScrollbar"
        role="button"
        aria-expanded="false"
        aria-controls="collapseWithScrollbar">
        Longer content
      </a>
      <div
        class="!visible mt-4 hidden max-h-24 overflow-y-auto"
        data-te-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,
        initTE,
      } from "tw-elements";
      
      initTE({ 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 initTE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

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

        
            
        import "tw-elements";

Usage

Via data attributes

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

HTML

        
            
        <p class="mb-4 space-y-1 md:space-x-1 md:space-y-0">
          <a
            class="inline-block rounded bg-blue-600 px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg"
            data-te-collapse-init
            data-te-ripple-init
            data-te-ripple-color="light"
            href="#collapseExample"
            role="button"
            aria-expanded="false"
            aria-controls="collapseExample">
            Link with href
          </a>
          <button
            class="inline-block rounded bg-blue-600 px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg"
            type="button"
            data-te-collapse-init
            data-te-target="#collapseExample"
            data-te-ripple-init
            data-te-ripple-color="light"
            aria-expanded="false"
            aria-controls="collapseExample">
            Button with data-te-target
          </button>
        </p>
        <div class="!visible hidden" id="collapseExample" data-te-collapse-item>
          <div class="block rounded-lg bg-white p-6 shadow-lg dark:bg-zinc-800">
            Some placeholder content for the collapse component. This panel is
            hidden by default but revealed when the user activates the relevant
            trigger.
          </div>
        </div>

Via JavaScript

javascript
umd

ES UMD

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

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-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-te-class, as in data-te-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.te.collapse` or `hidden.te.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.te.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.te.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 te.Collapse(myCollapseEl)
        myCollapse.show();

Events

Event type	Description
`show.te.collapse`	This event fires immediately when the `show` instance method is called.
`shown.te.collapse`	This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
`hide.te.collapse`	This event is fired immediately when the `hide` method has been called.
`hidden.te.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.te.collapse', () => {
          // do something...
        });

Collapse

Basic example

Horizontal

Multiple targets

With Scroll

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Collapse - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events