nouveau-theatre-de-besancon/site/snippets/collapsable-section.php

<?php
  $open = $open ?? false;
?>
<section class="collapsable" x-data="{
  open: <?= var_export($open) ?>,
  openSection(event) {
    const section = event.target.closest('.collapsable')
    section.querySelectorAll('[tabindex]').forEach(item => {
      if (item.getAttribute('tabindex') == -1) {
        item.setAttribute('tabindex', 0)
      } else {
        item.setAttribute('tabindex', -1)
      }
    })
    this.open = !this.open
  }
}">
  <button class="toggle" :class="open ? 'open' : ''" @click="openSection($event)" :title="open ? 'fermer': 'ouvrir'" :aria-expanded="open ? true : false">
    <h4><?= $title ?></h4>
    <span class="arrow-right" :class="open ? 'open' : ''">→</span>
  </button>
  <div class="collapsable__content<?php e(isset($padding) && !$padding, ' no-padding') ?>" :class="open ? 'open' : ''">
    <?= $slots->content() ?>
  </div>
</section>