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 >
            <h2  id="üretim_kategorisi_header">
              <button  type="button" data-bs-toggle="collapse"
                data-bs-target="#collapse_üretim" aria-expanded="true" aria-controls="collapse_üretim">
                <h2 >Üretim hakkındaki projeler</h2>
              </button>
            </h2>
            <div id="collapse_üretim" 
              aria-labelledby="üretim_kategorisi_header" data-bs-parent="#proje_kategori_kutusu">
              <div >

                <div >
                  <div >


                    {{#each projeler as |proje|}}



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

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

                        <div >
                          <img  alt="100%x280"
                            src="../images/randomForLibrary/{{proje.proje_resmi_url}}">
                          <div >
                            <h4 >
                              {{ proje.proje_ismi}}
                            </h4>
                            <p >

                              {{proje.proje_aciklamasi}}

                            </p>

                            <p >
                              {{proje.proje_kategorisi}}
                            </p>

                          </div>

                        </div>

                      </a>
                    </div>


                    {{/ifeq}}





                    {{/each}}


                  </div>
                </div>



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


          <div >
            <h2  id="arge_kategorisi_header">
              <button  type="button"
                data-bs-toggle="collapse" data-bs-target="#collapse_arge" aria-expanded="false"
                aria-controls="collapse_arge">
                <h2 >ARGE hakkındaki projeler</h2>
              </button>
            </h2>
            <div id="collapse_arge"  aria-labelledby="arge_kategorisi_header"
              data-bs-parent="#proje_kategori_kutusu">
              <div >

                <div >
                  <div >


                    {{#each projeler as |proje|}}



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

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

                        <div >
                          <img  alt="100%x280"
                            src="../images/randomForLibrary/{{proje.proje_resmi_url}}">
                          <div >
                            <h4 >
                              {{ proje.proje_ismi}}
                            </h4>
                            <p >

                              {{proje.proje_aciklamasi}}

                            </p>

                            <p >
                              {{proje.proje_kategorisi}}
                            </p>

                          </div>

                        </div>

                      </a>
                    </div>


                    {{/ifeq}}





                    {{/each}}


                  </div>
                </div>



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

CodePudding user response：

Remove show from the classes of #collapse_üretim.