nouveau-theatre-de-besancon/site/snippets/collapsable-section.php
2024-09-20 10:14:43 +02:00

22 lines
No EOL
823 B
PHP

<section class="collapsable" x-data="{
open: false,
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>