javascripthtmlcsstwitter-bootstrapbootstrap-accordion

How can I keep a Bootstrap accordion closed after the page is refreshed?


I'm using a Bootstrap v5.2 accordion in my website. Accordion includes bootstrap cards inside of it. Eveything works fine but when I refresh the page, first accordion item is automatically getting actived and opening itself. How can I prevent this issue ? For example, before refreshing the page, I leave the second accordion item open and after the page is refreshed, the second item is closed, and the first item opens by itself, although it was closed before the page was refreshed.

my accordion code :

          <div class="accordion-item">
            <h2 class="accordion-header" id="üretim_kategorisi_header">
              <button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapse_üretim" aria-expanded="true" aria-controls="collapse_üretim">
                <h2 class="text-black">Üretim hakkındaki projeler</h2>
              </button>
            </h2>
            <div id="collapse_üretim" class="accordion-collapse collapse show"
              aria-labelledby="üretim_kategorisi_header" data-bs-parent="#proje_kategori_kutusu">
              <div class="accordion-body">

                <div class="container">
                  <div class="row">


                    {{#each projeler as |proje|}}



                    {{#ifeq proje.proje_kategorisi 'Üretim' }}

                    <div class="col-md-4 mb-3">
                      <a data-bs-toggle="modal" data-bs-target="#reg-modal{{proje.id}}"
                        style="text-decoration:none;" href="#">

                        <div class="card">
                          <img class="card-img-top p-2 img-fluid" alt="100%x280"
                            src="../images/randomForLibrary/{{proje.proje_resmi_url}}">
                          <div class="card-body">
                            <h4 class="card-title text-center display-5">
                              {{ proje.proje_ismi}}
                            </h4>
                            <p class="card-text fs-6">

                              {{proje.proje_aciklamasi}}

                            </p>

                            <p class="project_category text-end">
                              {{proje.proje_kategorisi}}
                            </p>

                          </div>

                        </div>

                      </a>
                    </div>


                    {{/ifeq}}





                    {{/each}}


                  </div>
                </div>



              </div>
            </div>
          </div>


          <div class="accordion-item">
            <h2 class="accordion-header" id="arge_kategorisi_header">
              <button class="accordion-button collapsed d-block text-center" type="button"
                data-bs-toggle="collapse" data-bs-target="#collapse_arge" aria-expanded="false"
                aria-controls="collapse_arge">
                <h2 class="text-black">ARGE hakkındaki projeler</h2>
              </button>
            </h2>
            <div id="collapse_arge" class="accordion-collapse collapse" aria-labelledby="arge_kategorisi_header"
              data-bs-parent="#proje_kategori_kutusu">
              <div class="accordion-body">

                <div class="container">
                  <div class="row">


                    {{#each projeler as |proje|}}



                    {{#ifeq proje.proje_kategorisi 'ARGE' }}

                    <div class="col-md-4 mb-3">
                      <a data-bs-toggle="modal" data-bs-target="#reg-modal{{proje.id}}"
                        style="text-decoration:none;" href="#">

                        <div class="card">
                          <img class="card-img-top p-2 img-fluid" alt="100%x280"
                            src="../images/randomForLibrary/{{proje.proje_resmi_url}}">
                          <div class="card-body">
                            <h4 class="card-title text-center display-5">
                              {{ proje.proje_ismi}}
                            </h4>
                            <p class="card-text fs-6">

                              {{proje.proje_aciklamasi}}

                            </p>

                            <p class="project_category text-end">
                              {{proje.proje_kategorisi}}
                            </p>

                          </div>

                        </div>

                      </a>
                    </div>


                    {{/ifeq}}





                    {{/each}}


                  </div>
                </div>



              </div>
            </div>
          </div>
         
        </div> 

Solution

  • Remove show from the classes of #collapse_üretim.