What is an accordion in bootstrap?-Create a bootstrap accordion.

Imagine, you have a lot of related information to show to the user but you don’t want to give much space to that content on your website. So the question is- how would you put all of your related informative content in less space than required? The answer is – Accordion. Let’s explore more about the accordion.

First, let me show you a screenshot of the accordion. Because having a visual idea before reading the definition makes you understand things better.

First, I am sharing a screenshot of the accordion with all items hidden.

Now, see the screenshot below. Item #2 is showing its content when I clicked on that.

Now that you have a visual idea. Let’s understand it in words first, then I will share a code example.

What is accordion in bootstrap?

Accordion is a component in bootstrap where you can see and hide the content. When a user clicks on an accordion item then it shows its content and clicking on the same item again or on another accordion-item makes the content collapse(hides the content). Accordion uses the bootstrap collapse plugin.

How to create an accordion in bootstrap?

Now, let’s see the code to create an accordion in bootstrap.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">

         <!-- CSS only -->
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
         rel="stylesheet" 
         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
         crossorigin="anonymous">

         <title>Accordion Example</title>
    </head>
    
    <body>
        <div class="container">
            <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">
                      Item #1
                    </button>
                  </h2>
                  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <strong>First item's accordion body.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ligula dapibus, fringilla erat vitae, cursus libero. Maecenas at libero a arcu vestibulum porta accumsan ut lorem. Nunc a justo in magna varius vulputate. In faucibus tellus mi, id pulvinar erat facilisis molestie. Etiam eget dolor sit amet tellus feugiat pellentesque.
                    </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">
                      Item #2
                    </button>
                  </h2>
                  <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <strong>Second item's accordion body.</strong> Proin at maximus purus. Sed faucibus lectus nec sollicitudin pulvinar. Vestibulum sed quam arcu. In faucibus laoreet est, eu mattis nisi semper sit amet. Nunc arcu massa, rutrum et condimentum et, consequat id elit. Vivamus feugiat eleifend risus, non rutrum enim cursus vitae. Duis mattis arcu enim, vel interdum erat rhoncus non. Vestibulum vel malesuada sapien.
                    </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">
                      Item #3
                    </button>
                  </h2>
                  <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <strong>Third item's accordion body.</strong> Nullam a nulla convallis, viverra metus non, laoreet ipsum. Suspendisse potenti. Mauris a dapibus diam. Mauris aliquam nisi blandit, porttitor leo nec, rhoncus ligula. Nam accumsan tristique pretium. Proin egestas quam at interdum ultrices. Mauris eget dolor sed ipsum suscipit tristique quis tincidunt dui. Fusce et libero sit amet ex ornare mattis sit amet ut nibh. Sed a viverra arcu.
                    </div>
                  </div>
                </div>
              </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
        crossorigin="anonymous">
       </script>
    </body>
</html>

To create the accordion, I have applied the bootstrap accordion class on a <div>. Inside this, I have used three other <div> for the accordion items and applied the class accordion-item.

Now you know about the accordion in bootstrap.

Goodbye

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: