Tailwind CSS React Collapse

Use responsive collapse component with helper examples for expand collapse, collappse toggle, collapse animation & more.

Basic example

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height or width from its current value to 0.

        
            
      import React, { useState } from "react";
      import { TECollapse, TERipple } from "tw-elements-react";
      
      export default function CollapseBasicExample(): JSX.Element {
        const [show, setShow] = useState(false);
      
        const toggleShow = () => setShow(!show);
      
        return (
          <>
            <TERipple rippleColor="light">
              <a
                className="inline-block rounded bg-primary mr-2 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)]"
                role="button"
                onClick={toggleShow}
              >
                Link
              </a>
            </TERipple>
            <TERipple rippleColor="light">
              <button
                type="button"
                className="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)]"
                onClick={toggleShow}
              >
                Button
              </button>
            </TERipple>
      
            <TECollapse show={show}>
              <div className="block rounded-lg bg-white p-6 shadow-lg 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>
            </TECollapse>
          </>
        );
      }

Hey there 👋 we're excited about TW Elements for React 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 horizontal attribute to transition the width instead of height and set a width on the immediate child element.

        
            
      import React, { useState } from "react";
      import { TECollapse, TERipple } from "tw-elements-react";
      
      export default function CollapseHorizontal(): JSX.Element {
        const [show, setShow] = useState(false);
      
        const toggleShow = () => setShow(!show);
      
        return (
          <>
            <TERipple rippleColor="light">
              <button
                type="button"
                className="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)]"
                onClick={toggleShow}
              >
                Button
              </button>
            </TERipple>
            <TECollapse horizontal className="max-w-[400px]" show={show}>
              <div className="block rounded-lg w-[400px] bg-white p-6 shadow-lg 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>
            </TECollapse>
          </>
        );
      }

Multiple targets

You can show and hide multiple elements with one button or multiple buttons. You have to change state to render component with another value.

        
            
      import React, { useState } from "react";
      import { TECollapse, TERipple } from "tw-elements-react";
      
      export default function CollapseMultipleTargets(): JSX.Element {
        const [showFirstElement, setShowFirstElement] = useState(false);
        const [showSecondElement, setShowSecondElement] = useState(false);
      
        const toggleFirstElement = () => setShowFirstElement(!showFirstElement);
        const toggleSecondElement = () => setShowSecondElement(!showSecondElement);
      
        const toggleBothElements = () => {
          setShowFirstElement(!showFirstElement);
          setShowSecondElement(!showSecondElement);
        };
      
        return (
          <>
              <TERipple rippleColor="light">
                <button
                  type="button"
                  className="inline-block rounded bg-primary mr-2 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)]"
                  onClick={toggleFirstElement}
                >
                  Toggle first element
                </button>
              </TERipple>
              <TERipple rippleColor="light">
                <button
                  type="button"
                  className="inline-block rounded bg-primary mr-2 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)]"
                  onClick={toggleSecondElement}
                >
                  Toggle second element
                </button>
              </TERipple>
              <TERipple rippleColor="light">
                <button
                  type="button"
                  className="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)]"
                  onClick={toggleBothElements}
                >
                  Toggle both elements
                </button>
              </TERipple>
            </div>
      
            <div className="grid gap-4 md:grid-cols-2">
              <div>
                <TECollapse show={showFirstElement}>
                  <div className="block rounded-lg bg-white p-6 shadow-lg 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>
                </TECollapse>
              </div>
              <div>
                <TECollapse show={showSecondElement}>
                  <div className="block rounded-lg bg-white p-6 shadow-lg 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>
                </TECollapse>
              </div>
          </>
        );
      }

With Scroll

Use prop scroll to see content with scrollbar.

        
            
      import React, { useState } from "react";
      import { TECollapse, TERipple } from "tw-elements-react";
      
      export default function CollapseWithScroll(): JSX.Element {
        const [show, setShow] = useState(false);
      
        const toggleShow = () => setShow(!show);
      
        return (
          <>
            <TERipple rippleColor="light">
              <button
                type="button"
                className="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)]"
                onClick={toggleShow}
              >
                Longer content
              </button>
            </TERipple>
      
            <TECollapse scroll show={show}>
              <div className="block rounded-lg bg-white p-6 shadow-lg dark:bg-neutral-700 dark:text-neutral-50">
                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.
              </div>
            </TECollapse>
          </>
        );
      }

If you are looking for more advanced options, try Bootstrap Collapse from MDBootstrap.

Name	Type	Default	Description
`collapseRef`	RejObject<HTMLElement>	`-`	Reference to `TECollapse` element.
`horizontal`	boolean	`false`	Enables horizontal `TECollapse`.
`id`	string	`-`	Defines an id for the `TECollapse`.
`scroll`	boolean	`false`	Creates collapse content with scrollbar.
`show`	boolean	`false`	Changes visible of content inside `TECollapse`.
`tag`	string	`'div'`	Defines tag of the `TECollapse` element.
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component.

Name	Default	Description
`collapseStyles`	rounded-lg shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] mt-3	Sets default 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.
`hidden`	hidden	Sets display styles to the collapsible element.
`scrollStyles`	max-h-24 overflow-y-auto max-w-[500px]	Sets styles to the collapsible element when `TECollapse scroll={true}`
`visible`	!visible	Sets visibility styles to the collapsible element.

Name	Description
`onHide`	A callback fired when the `TECollapse` is hiding.
`onShow`	A callback fired when the `TECollapse` is showing.

Collapse

Basic example

Horizontal

Multiple targets

With Scroll

Collapse - API

Import

Properties

TECollapse

Classes

Events

Collapse

Tailwind CSS React Collapse

Basic example

Horizontal

Multiple targets

With Scroll

Related resources

Collapse - API

Import

Properties

TECollapse

Classes

Events