CODEWITHSUNDEEP
javascripthtmlcssaccordion
user3378613
user3378613

Reputation: 113

Accordion with one tab always expanded. Bootstrap 5

I have an accordion made with bootstrap 5. How can i make the accordion has always one tab expanded? in other words i dont want tabs to be closed all together, i want one to be open always. How can i do that with plain javascript?

<div class="accordion" id="accordionExample">
                <div class="accordion-item">
                  <h1 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">
                      ...
                    </button>
                  </h1>
                  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      
...
                    </div>
                  </div>
                </div>
                <div class="accordion-item">
                  <h1 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"
                    >
                      ...
                    </button>
                  </h1>
                  <div
                    id="collapseTwo"
                    class="accordion-collapse collapse"
                    aria-labelledby="headingTwo"
                    data-bs-parent="#accordionExample"
                  >
                    <div class="accordion-body">
                      ...
                    </div>
                  </div>
                </div>

I dont want this to happen....

enter image description here

Upvotes: 1

Views: 2324

Answers (3)

James Osguthorpe
James Osguthorpe

Reputation: 171

Use the hidden trigger...

$('.collapse').on('hidden.bs.collapse', function () {
  $('.collapse').eq(0).collapse('show');
});

Upvotes: 0

Juan
Juan

Reputation: 71

I struggled with the same problem for a while and was finally able to write a solution for it. I'm not a js master so it's probably not the most elegant solution but it works:

<script>
    const accordions = document.querySelectorAll(".accordion-collapse");
    let opening = false;
    accordions.forEach(function (el) {
      el.addEventListener("hide.bs.collapse", (event) => {
        if (!opening) {
          event.preventDefault();
          event.stopPropagation();
        } else {
          opening = false;
        }
      });
      el.addEventListener("show.bs.collapse", (event) => {
        opening = true;
      });
    });
</script>

Kinda late but it may be useful to others too

Upvotes: 4

FireLordZuko
FireLordZuko

Reputation: 95

It seems you want to achieve the design and layout style of a bootstrap accordion but doesn't require it's functionality. The best way to achieve this is writing static html/css instead of using a bootstrap component which is there for a different cause.

According to your question you are trying to make something similar to this:

enter image description here

This is hard-coded using bootstrap, so it would be just opened forever. Use a png of a down chevron or use this from fontawesome. I just linked to an image from an external source from a google to be quick.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>

    <div class="acordionThing" style="margin:5rem">
        <div class="col d-flex" style="background-color: rgb(185, 185, 185); ">
            <div class="col">
                <p style=" margin:1rem">
                    Somekind of a text here.
                </p>
            </div>
            <div style="width:2rem; float:right; margin-right: 2rem;">
                <img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;"">
            </div>
        </div>
        <div class="col d-flex" style="background-color: rgb(218, 218, 218);">
            <div class="col">
                <p style=" margin:1rem">
                    Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
                    Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
                    
                </p>
            </div>
        
        </div>
    </div>

    <div class="acordionThing" style="margin:5rem">
        <div class="col d-flex" style="background-color: rgb(185, 185, 185); ">
            <div class="col">
                <p style=" margin:1rem">
                    Somekind of a text here.
                </p>
            </div>
            <div style="width:2rem; float:right; margin-right: 2rem;">
                <img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;"">
            </div>
        </div>
        <div class="col d-flex" style="background-color: rgb(218, 218, 218);">
            <div class="col">
                <p style=" margin:1rem">
                    Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
                    Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
                    
                </p>
            </div>
        
        </div>
    </div>
    


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

Related Questions