Basic
Use the accordion class to expand/collapse the accordion content.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_01" aria-expanded="true" aria-controls="demo_accordion_item_01">
Accordion Item #1
</button>
</h2>
<div id="demo_accordion_item_01" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_02" aria-expanded="false" aria-controls="demo_accordion_item_02">
Accordion Item #2
</button>
</h2>
<div id="demo_accordion_item_02" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_03" aria-expanded="false" aria-controls="demo_accordion_item_03">
Accordion Item #3
</button>
</h2>
<div id="demo_accordion_item_03" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Flush
Use accordion-flush class to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
<div class="accordion accordion-flush" id="demo_accordion_main_02">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_11" aria-expanded="true" aria-controls="demo_accordion_item_11">
Accordion Item #1
</button>
</h2>
<div id="demo_accordion_item_11" class="accordion-collapse collapse show" data-bs-parent="#demo_accordion_main_02">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_12" aria-expanded="false" aria-controls="demo_accordion_item_12">
Accordion Item #2
</button>
</h2>
<div id="demo_accordion_item_12" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_02">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_13" aria-expanded="false" aria-controls="demo_accordion_item_13">
Accordion Item #3
</button>
</h2>
<div id="demo_accordion_item_13" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_02">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordions with Icons
Use accordion-icon class to show custom icon at accordion.
<div class="accordion accordion-icon" id="demo_accordion_main_03">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_31" aria-expanded="true" aria-controls="demo_accordion_item_31">
<i class="ri-code-line me-2"></i> Frontend Development
</button>
</h2>
<div id="demo_accordion_item_31" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_03">
<div class="accordion-body">
<strong>Frontend Development</strong> focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_32" aria-expanded="false" aria-controls="demo_accordion_item_32">
<i class="ri-braces-line me-2"></i> Backend Development
</button>
</h2>
<div id="demo_accordion_item_32" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_03">
<div class="accordion-body">
<strong>Backend Development</strong> involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_33" aria-expanded="false" aria-controls="demo_accordion_item_33">
<i class="ri-paint-brush-line me-2"></i> Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_33" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_03">
<div class="accordion-body">
<strong>Bootstrap Customizations</strong> allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
</div>
</div>
</div>
</div>Accordions without Icons
Use the .accordion-icon-none class to create Bootstrap accordions without icons. This class hides any default icons, giving your accordion a cleaner look.
<div class="accordion accordion-icon-none" id="demo_accordion_main_04">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_41" aria-expanded="true" aria-controls="demo_accordion_item_41">
<span class="accordion-icon me-2">
<i class="ri-code-line"></i>
</span>
Frontend Development
</button>
</h2>
<div id="demo_accordion_item_41" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_04">
<div class="accordion-body">
<strong>Frontend Development</strong> focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_42" aria-expanded="false" aria-controls="demo_accordion_item_42">
<i class="ri-braces-line me-2"></i> Backend Development
</button>
</h2>
<div id="demo_accordion_item_42" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_04">
<div class="accordion-body">
<strong>Backend Development</strong> involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_43" aria-expanded="false" aria-controls="demo_accordion_item_43">
<i class="ri-paint-brush-line me-2"></i> Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_43" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_04">
<div class="accordion-body">
<strong>Bootstrap Customizations</strong> allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
</div>
</div>
</div>
</div>Accordions with Plus Icon
Use the .accordion-with-plus class to add a plus icon to your Bootstrap accordion. Place the icon inside the .accordion-header to indicate expand/collapse functionality.
Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
<div class="accordion accordion-with-plus" id="demo_accordion_main_06">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_61" aria-expanded="true" aria-controls="demo_accordion_item_61">
<span class="accordion-icon me-2">
<i class="ri-code-line"></i>
</span>
Frontend Development
</button>
</h2>
<div id="demo_accordion_item_61" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_06">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_62" aria-expanded="false" aria-controls="demo_accordion_item_62">
<i class="ri-braces-line me-2"></i> Backend Development
</button>
</h2>
<div id="demo_accordion_item_62" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_06">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_63" aria-expanded="false" aria-controls="demo_accordion_item_63">
<i class="ri-paint-brush-line me-2"></i> Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_63" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_06">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordions with Left Icon with Plus Icon
Use the .accordion-with-left-icon class to add an icon on the left of each accordion item. Place your icon in an <i> tag within the .accordion-header.
<div class="accordion accordion-with-plus accordion-with-left-icon" id="demo_accordion_main_07">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_71" aria-expanded="true" aria-controls="demo_accordion_item_71">
Frontend Development
</button>
</h2>
<div id="demo_accordion_item_71" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_07">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_72" aria-expanded="false" aria-controls="demo_accordion_item_72">
Backend Development
</button>
</h2>
<div id="demo_accordion_item_72" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_07">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_73" aria-expanded="false" aria-controls="demo_accordion_item_73">
Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_73" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_07">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordions with theme color
Customize your Bootstrap accordion header with theme colors by applying classes like .accordion-primary or .text-white.
Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
<div class="accordion accordion-primary accordion-border-box" id="demo_accordion_main_08">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_81" aria-expanded="true" aria-controls="demo_accordion_item_81">
Frontend Development
</button>
</h2>
<div id="demo_accordion_item_81" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_08">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_82" aria-expanded="false" aria-controls="demo_accordion_item_82">
Backend Development
</button>
</h2>
<div id="demo_accordion_item_82" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_08">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_83" aria-expanded="false" aria-controls="demo_accordion_item_83">
Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_83" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_08">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordions with subtitle
Add subtitles to Bootstrap accordions by including a <h6> or <small> tag in the .accordion-header. This provides extra context for each section.
Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
<div class="accordion accordion-secondary accordion-border-box" id="demo_accordion_main_09">
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_91" aria-expanded="true" aria-controls="demo_accordion_item_91">
<div>
<p class="mb-0">Frontend Development</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_91" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_09">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_92" aria-expanded="false" aria-controls="demo_accordion_item_92">
<div>
<p class="mb-0">Backend Development</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_92" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_09">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_93" aria-expanded="false" aria-controls="demo_accordion_item_93">
<div>
<p class="mb-0">Bootstrap Customizations</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_93" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_09">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordion With Content
You can create an accordion with images in Bootstrap by including <img> tags within the .accordion-header section. This lets you display images alongside text content, enhancing visual appeal and information delivery.
Frontend Development
Press to expand
Frontend Development
Press to expand
Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
Backend Development
Press to expand
Backend Development
Press to expand
Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
Bootstrap Customizations
Press to expand
Bootstrap Customizations
Press to expand
Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
<div class="accordion accordion-border-box" id="demo_accordion_main_10">
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_100" aria-expanded="true" aria-controls="demo_accordion_item_100">
<div class="avatar-image avatar-lg me-3">
<img class="img-fluid rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
</div>
<div>
<p class="mb-0">Frontend Development</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_100" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_10">
<div class="accordion-body">
<strong>Frontend Development</strong> focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_101" aria-expanded="false" aria-controls="demo_accordion_item_101">
<div class="avatar-image avatar-lg me-3">
<img class="img-fluid rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
</div>
<div>
<p class="mb-0">Backend Development</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_101" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_10">
<div class="accordion-body">
<strong>Backend Development</strong> involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_103" aria-expanded="false" aria-controls="demo_accordion_item_103">
<div class="avatar-image avatar-lg me-3">
<img class="img-fluid rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
</div>
<div>
<p class="mb-0">Bootstrap Customizations</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_103" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_10">
<div class="accordion-body">
<strong>Bootstrap Customizations</strong> allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
</div>
</div>
</div>
</div>Nesting Accordions
With Bootstrap, you can create nested accordions to organize content hierarchically. To do this, simply place an <accordion> component inside another <accordion>. Make sure each nested accordion has a unique ID for proper functionality.
Set up your development environment by installing necessary tools and frameworks like Node.js, npm, and a code editor.
Install tools such as Node.js, npm, and any code editor like VSCode.
Design UI using tools like Figma or Adobe XD.
Create Wireframe to plan the application layout.
Code frontend components and perform regular testing.
Follow best coding practices and use frameworks like Bootstrap.
Install and configure backend environment.
Install server frameworks and databases.
Develop and test APIs using tools like Postman.
Use Postman to test API endpoints.
Collapse Example
You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="collapse" is required.
More Details
Here’s some extra information that might be useful. For example, if you’re reading about a product, you could find details about its features, user instructions, or any other interesting facts. This part is hidden by default and will appear when you click either of the buttons above.
<!-- Collapsible Trigger Area -->
<div class="d-inline-flex gap-2 mb-3">
<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>
</div>
<!-- Collapsible Content Area -->
<div class="collapse show" id="collapseExample">
<div class="card card-body mb-0">
<h5 class="card-title">More Details</h5>
<p class="card-text">
Here’s some extra information that might be useful. For example, if you’re reading about a product, you could find details about its features, user instructions, or any other interesting facts. This part is hidden by default and will appear when you click either of the buttons above.
</p>
</div>
</div>Horizontal Collapse
Use the collapse-horizontal class to make elements slide open and closed horizontally, instead of vertically. Make sure to set a specific width on the child element that you want to collapse.
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when you click the button.
<!-- Collapsible Trigger Area -->
<div class="d-inline-flex gap-2 mb-3">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</div>
<!-- Collapsible Content Area -->
<div class="collapse show collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when you click the button.
</div>
</div>Collapse with Icon
Click the icon to toggle the collapse.
Read Less
Read More
This is some detailed content that gets revealed when you click "Read More" and hidden when you click "Read Less". Customize this text as needed for your application.
<!-- Collapsible Trigger Area with Remix Icon -->
<div class="d-flex flex-wrap gap-5 align-items-center mb-3">
<button class="btn btn-primary icon-btn custom-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent">
<span class="icon-on">
<i class="ri-subtract-line"></i>
</span>
<span class="icon-off">
<i class="ri-add-line"></i>
</span>
</button>
<div class="custom-toggle fw-semibold d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent" role="button">
<span class="icon-on">
Read Less
<i class="ri-arrow-up-s-line ms-2"></i>
</span>
<span class="icon-off">
Read More
<i class="ri-arrow-down-s-line ms-2"></i>
</span>
</div>
</div>
<!-- Collapsible Content Area -->
<div class="collapse show" id="collapseContent">
<div class="card card-body mb-0">
This is some detailed content that gets revealed when you click "Read More" and hidden when you click "Read Less". Customize this text as needed for your application.
</div>
</div>Controlling Multiple Collapses
You can use a <button> or <a> to control multiple collapsible elements at once by using the same data-bs-target or href attribute. Similarly, a single <button> or <a> can control multiple collapsible elements if you use the same attribute value for all.
This is the content for the first section. It’s hidden by default and will be shown when the appropriate button is clicked.
This is the content for the second section. It’s hidden by default and will be shown when the appropriate button is clicked.
<!-- Collapsible Trigger Buttons -->
<div class="d-inline-flex gap-2 mb-3">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseOne" role="button" aria-expanded="false" aria-controls="collapseOne">Toggle First Section</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Toggle Second Section</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="collapseOne collapseTwo">Toggle Both Sections</button>
</div>
<!-- Collapsible Content Sections -->
<div class="row">
<div class="col">
<div class="collapse show multi-collapse" id="collapseOne">
<div class="card card-body mb-0">
This is the content for the first section. It’s hidden by default and will be shown when the appropriate button is clicked.
</div>
</div>
</div>
<div class="col">
<div class="collapse show multi-collapse" id="collapseTwo">
<div class="card card-body mb-0">
This is the content for the second section. It’s hidden by default and will be shown when the appropriate button is clicked.
</div>
</div>
</div>
</div>