Accordion Boostrap 5 nie działa na komórkach i tabletach

Question

Witam szanowne grono.

Tworzę stronę internetową wpartą na WordPress z motywem edytowanym w kodzie i na podstronie użyłem accordion z Bootstrap 5. Od pewnego momentu zauważyłem, że nie wyświetla tekstu po kliknięciu w accordion na urządzeniach mobilnych. Macie jakieś pomysły, co mogłoby się stać, że nie działa?

Poniżej znajduje się przykładowy accordion. Wykorzystuję też kilka (np. 10x) accordion-item w jednym accordionie.

<div class="accordion" id="accordionExample">
                    <!-- Start Item 1 (Topic 9) -->
                    <div class="accordion-item">
                        <div class="accordion-header" id="headingQA-Thirty-Eight">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseQA-Thirty-Eight" aria-expanded="true"
                                aria-controls="collapseQA-Thirty-Eight">
                                <div class="heading-text"><?php the_field('qa_question_9'); ?></div>
                                <div class="accordion-btn">
                                    <div class="icon"><?php the_field( 'icon' ); ?></div>
                            </button>
                        </div>
                        <div id="collapseQA-Thirty-Eight" class="accordion-collapse collapse"
                            aria-labelledby="headingQA-Thirty-Eight" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <p><?php the_field('qa_content_9'); ?></p>
                            </div>
                        </div>
                    </div>
                    <!-- End Item 1 (Topic 9) -->
                </div>

PS. Nie wiem, czy to ważne, ale wcześniej musiałem osobno dodać:

<meta name="viewport" content="width=device-width, initial-scale=1">

do head na tej podstronie, co niedziałający accordion na urządzeniach mobilnych, chociaż miałem import head ze strony głównej przy pomocy:

<?php wp_head(); ?>

Z góry dziękuję za rady :D

Comments

Z tego kodu co zaprezentowałeś IMO nie da się odtworzyć Twojego problemu a co za tym idzie udzielić jakieś sensownej pomocy, ale to co "znalazłem"

<div class="accordion" id="accordionExample">
  <!-- Start Item 1 (Topic 9) -->
  <div class="accordion-item">
    <div class="accordion-header" id="headingQA-Thirty-Eight">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseQA-Thirty-Eight" aria-expanded="true"
              aria-controls="collapseQA-Thirty-Eight">
        <div class="heading-text"><?php the_field('qa_question_9'); ?></div>
        <div class="accordion-btn">
          <div class="icon"><?php the_field( 'icon' ); ?></div>
          </button>
        </div>
      
      <div id="collapseQA-Thirty-Eight" class="accordion-collapse collapse"
           aria-labelledby="headingQA-Thirty-Eight" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p><?php the_field('qa_content_9'); ?></p>
        </div>
      </div>
      
    </div>
    <!-- End Item 1 (Topic 9) -->
  </div>

div z linii 4 nie ma domknięcia </div>, który powinien być według Mnie w linii 13

no i <button> jest domknięty w nieprawidłowym miejscu

<div class="accordion" id="accordionExample">
  <!-- Start Item 1 (Topic 9) -->
  <div class="accordion-item">
    <div class="accordion-header" id="headingQA-Thirty-Eight">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseQA-Thirty-Eight" aria-expanded="true"
              aria-controls="collapseQA-Thirty-Eight">
        <div class="heading-text"><?php the_field('qa_question_9'); ?></div>
        <div class="accordion-btn">
          <div class="icon"><?php the_field( 'icon' ); ?></div>
          </button>
        </div>
      
      <div id="collapseQA-Thirty-Eight" class="accordion-collapse collapse"
           aria-labelledby="headingQA-Thirty-Eight" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p><?php the_field('qa_content_9'); ?></p>
        </div>
      </div>
      
    </div>
    <!-- End Item 1 (Topic 9) -->
  </div>

 

<div class="accordion" id="accordionExample">
  <!-- Start Item 1 (Topic 9) -->
  <div class="accordion-item">
    <div class="accordion-header" id="headingQA-Thirty-Eight">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseQA-Thirty-Eight" aria-expanded="true"
              aria-controls="collapseQA-Thirty-Eight">
        <div class="heading-text"><?php the_field('qa_question_9'); ?></div>
        <div class="accordion-btn">
          <div class="icon"><?php the_field( 'icon' ); ?></div>          
        </div>
      </button>
    </div>

    <div id="collapseQA-Thirty-Eight" class="accordion-collapse collapse"
         aria-labelledby="headingQA-Thirty-Eight" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p><?php the_field('qa_content_9'); ?></p>
      </div>
    </div>

  </div>
  <!-- End Item 1 (Topic 9) -->
</div>