Logo v4.3.1
Getting Started Introduction
Getting Started Gulp
Getting Started Customization
Getting Started Credits
Getting Started Changelog
Design & Graphics Bootstrap Icons
Design & Graphics Duotone Icons
Design & Graphics Illustrations
Components Accordion
Components Alerts
Components Avatars
Components Badge
Components Breadcrumb
Components Buttons
Components Cards
Components Collapse
Components Column divider
Components Devices
Components Divider
Components Dropdowns
Components Icons
Components List Group
Components Lists
Components Legend Indicator
Components Modal
Components Offcanvas
Components Page Header
Components Pagination
Components Popovers
Components Progress
Components Profile
Components Shapes
Components Spinners
Components Steps
Components Tab
Components Tables
Components Text Highlight
Components Toasts
Components Tooltips
Components Typography
Navbars Navbar
Navbars Navs
Navbars Mega Menu
Navbars Scrollspy
Basic forms Basic forms
Basic forms Checks and switches
Basic forms Input group
Utilities Backgrounds
Utilities Borders
Utilities Colors
Utilities Links
Utilities Position
Utilities Rotations
Utilities Shadows
Utilities Sizing
Utilities Spacing
Utilities Z-index
Advanced forms Advanced select
Advanced forms File attachments
Advanced forms Drag’ n’ drop file uploads
Advanced forms WYSIWYG Editor
Advanced forms Quantity counter
Advanced forms Input mask
Advanced forms Step forms (Wizards)
Advanced forms Wizards
Advanced forms Range slider (noUiSlider)
Advanced forms Add field
Advanced forms Toggle password
Advanced forms Count characters
Advanced forms Toggle switch
Advanced forms Toggle state
Advanced forms Switch
Media Fullscreen Lightbox
Media Video Background
Media Video Player
Media Swiper
Others Maps (Leaflet)
Others Chart.js
Others Circles.js (Pie Chart).js
Others Sticky block
Others Countdown
Others Sorting (Shuffle.js)
Others Go To
Others Show Animation
Others Typed.js
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v4.3.1
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Duotone Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Spinners
  • Steps
  • Tab
  • Tables
  • Text Highlight
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Input Mask
  • Step Forms (Wizards)
  • Range Slider (noUiSlider)
  • Add Field
  • Toggle Password
  • Count Characters
  • Toggle Switch
  • Toggle State
  • Switch
  • Media
  • Fullscreen Lightbox
  • Video Background
  • Video Player
  • Swiper
  • Others
  • Maps (Leaflet)
  • Chart.js
  • Circles.js (Pie Chart)
  • Sticky Block
  • Countdown
  • Sorting (Shuffle.js)
  • Go To
  • Show Animation
  • Typed.js
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Rotations
  • Shadows
  • Sizing
  • Spacing
  • Z-index

Collapse

Toggle the visibility of content across your project.

Bootstrap Collapse documentation

Example

Click the buttons below to show and hide another element via class changes:

  • .collapse hides content
  • .collapsing is applied during transitions
  • .collapse.show shows content

Generally, we recommend using a button with the data-bs-target attribute. While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button"). In both cases, the data-bs-toggle="collapse" is required.

  • Preview
  • HTML

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.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>
Copy

Multiple targets

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

  • Preview
  • HTML

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.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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 class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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>
Copy