---
title: "Accordion in Bootstrap"  
description: "Accordion in Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156615/accordion-in-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 4 minutes  

---

# Accordion in Bootstrap

How to make an [accordion](https://www.mindstick.com/blog/626/accordion-using-bootstrap-in-asp-dot-net) in [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) that will open only [one card](https://answers.mindstick.com/qa/93866/how-to-make-an-accordion-in-bootstrap-that-will-only-open-one-card-at-a-time) at a time?

## Replies

### Reply by Anonymous User

To make a Accordion Button with Bootstrap see the below example:

```
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <title>Bootstrap Dropdown</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</head>
<body>
    <div class='container d-flex justify-content-center flex-column align-items-center'>
        <div class='accordion' id='accordionExample'>
            <div class='accordion-item'>
                <h2 class='accordion-header' id='headingOne'>
                    <button class='accordion-button' type='button' data-bs-toggle='collapse' data-bs-target='#collapseOne' aria-expanded='true' aria-controls='collapseOne'>
                        Home
                    </button>
                </h2>
                <div id='collapseOne' class='accordion-collapse collapse show' aria-labelledby='headingOne' data-bs-parent='#accordionExample'>
                    <div class='accordion-body'>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                    </div>
                </div>
            </div>
            <div class='accordion-item'>
                <h2 class='accordion-header' id='headingTwo'>
                    <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#collapseTwo' aria-expanded='false' aria-controls='collapseTwo'>
                       About
                    </button>
                </h2>
                <div id='collapseTwo' class='accordion-collapse collapse' aria-labelledby='headingTwo' data-bs-parent='#accordionExample'>
                    <div class='accordion-body'>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                    </div>
                </div>
            </div>
            <div class='accordion-item'>
                <h2 class='accordion-header' id='headingThree'>
                    <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#collapseThree' aria-expanded='false' aria-controls='collapseThree'>
                        Services
                    </button>
                </h2>
                <div id='collapseThree' class='accordion-collapse collapse' aria-labelledby='headingThree' data-bs-parent='#accordionExample'>
                    <div class='accordion-body'>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
```

Hope this will help you.

Happy Coding!

\


---

Original Source: https://www.mindstick.com/forum/156615/accordion-in-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
