search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue
    • Overview
    • API

    Collapse

    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

    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
    • HTML
            
                
          <p class="mb-4 space-y-1 md:space-x-1 md:space-y-0">
            <a
              class="inline-block rounded bg-primary px-6 pt-2.5 pb-2 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)]"
              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 pt-2.5 pb-2 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)]"
              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>
          </p>
          <div class="!visible hidden" id="collapseExample" data-te-collapse-item>
            <div
              class="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>
          </div>
          
            
        

    Hey there 👋 we want to make Tailwind 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 Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    Horizontal

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

    This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    • HTML
            
                
          <p class="mb-4">
            <button
              class="inline-block rounded bg-primary px-6 pt-2.5 pb-2 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)]"
              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>
          </p>
          <div style="min-height: 120px">
            <div
              class="!visible hidden"
              data-te-collapse-item
              data-te-collapse-horizontal
              id="collapseWidthExample">
              <div
                class="block max-w-sm rounded-lg bg-white p-6 shadow-lg dark:bg-neutral-700 dark:text-neutral-50"
                style="width: 300px;">
                This is some placeholder content for a horizontal collapse. It's
                hidden by default and shown when triggered.
              </div>
            </div>
          </div>
          
            
        

    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

    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.
    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.
    • HTML
            
                
          <p class="mb-4 space-y-1 md:space-x-1 md:space-y-0">
            <a
              class="inline-block rounded bg-primary px-6 pt-2.5 pb-2 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)]"
              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 pt-2.5 pb-2 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)]"
              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 pt-2.5 pb-2 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)]"
              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>
          </p>
          <div class="grid gap-4 md:grid-cols-2">
            <div>
              <div
                class="multi-collapse !visible hidden"
                data-te-collapse-item
                id="multiCollapseExample1">
                <div
                  class="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>
              </div>
            </div>
            <div>
              <div
                class="multi-collapse !visible hidden"
                data-te-collapse-item
                id="multiCollapseExample2">
                <div
                  class="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>
              </div>
            </div>
          </div>
          
            
        

    With Scroll

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

    Longer content

    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.

    • HTML
            
                
          <a
            class="inline-block rounded bg-primary px-6 pt-2.5 pb-2 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)]"
            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>
          
            
        

    Related resources

    Mega Menu Nested Dropdown Multiselect Tailwind Mega Menu Collapse Bootstrap Dropdown Tutorial

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

    • Basic example
    • Horizontal
    • Multiple targets
    • With scroll
    • Related resources

    Collapse - API


    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.

    • 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

    • JS
            
                
            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
            
                
            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...
            });
            
            
        
    • Usage
    • Options
    • Classes
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com