Come creare un accordion su Joomla o altri CMS senza usare plugin esterni

Accordion dinamico per Smartphone e desktop

<!-- Carica Bootstrap 5 Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Accordion -->
<div class="accordion" id="faqAccordion">

  <!-- Item 1 -->
  <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">
        Domanda 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Risposta 1
      </div>
    </div>
  </div>

  <!-- Item 2 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
        Domanda 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Risposta 2
      </div>
    </div>
  </div>

</div>

<!-- Script per comportamento dinamico -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  function toggleAccordion() {
    var width = window.innerWidth;
    var accordions = document.querySelectorAll('.accordion-collapse');

    if (width <= 768) { // Mobile: chiudi tutto
      accordions.forEach(function(acc) {
        acc.classList.remove('show');
        var btn = acc.previousElementSibling.querySelector('.accordion-button');
        btn.classList.add('collapsed');
        btn.setAttribute('aria-expanded', 'false');
      });
    } else { // Desktop/Tablet: apri tutto
      accordions.forEach(function(acc) {
        acc.classList.add('show');
        var btn = acc.previousElementSibling.querySelector('.accordion-button');
        btn.classList.remove('collapsed');
        btn.setAttribute('aria-expanded', 'true');
      });
    }
  }

  // Esegui subito al caricamento
  toggleAccordion();

  // Esegui anche se la finestra viene ridimensionata
  window.addEventListener('resize', toggleAccordion);
});
</script>