<div>
<div class="js-accordeon__fulltext o-prose">
<p>Etiam pellentesque fringilla ex, ac tincidunt leo varius quis. Suspendisse eleifend varius magna at lacinia. Aenean nisl nisi, interdum vel hendrerit non, auctor vitae sapien. Pellentesque pellentesque aliquet urna, in maximus nisl eleifend ac. Sed cursus, sem sit amet dignissim porttitor, odio ante consectetur sem, sed mollis mi nibh nec mauris. Nam at nunc tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis non elit eu nunc condimentum auctor sit amet id eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque dignissim metus mi, sed dignissim augue egestas sed. Sed vel massa feugiat, dapibus arcu ut, malesuada nibh. Nam ac est eros. Morbi hendrerit vitae lacus sit amet commodo. Etiam lacus arcu, commodo a placerat ac, volutpat quis ligula.</p>
</div>
<button aria-expanded="false" aria-controls="js-more-1" aria-pressed="false" class="c-button c-button--transparent js-accordeon__toggle-btn" hidden>
<span class="js-accordeon__toggle-btn-text">Afficher plus</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div>
<div class="js-accordeon__fulltext o-prose">
{{ fulltext | safe }}
</div>
<button aria-expanded="false"
aria-controls="js-more-1"
aria-pressed="false"
class="c-button c-button--transparent js-accordeon__toggle-btn"
hidden>
<span class="js-accordeon__toggle-btn-text">Afficher plus</span>{% render '@svg-chevron-right' %}
</button>
</div>
{
"fulltext": "<p>Etiam pellentesque fringilla ex, ac tincidunt leo varius quis. Suspendisse eleifend varius magna at lacinia. Aenean nisl nisi, interdum vel hendrerit non, auctor vitae sapien. Pellentesque pellentesque aliquet urna, in maximus nisl eleifend ac. Sed cursus, sem sit amet dignissim porttitor, odio ante consectetur sem, sed mollis mi nibh nec mauris. Nam at nunc tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis non elit eu nunc condimentum auctor sit amet id eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque dignissim metus mi, sed dignissim augue egestas sed. Sed vel massa feugiat, dapibus arcu ut, malesuada nibh. Nam ac est eros. Morbi hendrerit vitae lacus sit amet commodo. Etiam lacus arcu, commodo a placerat ac, volutpat quis ligula.</p>"
}
// Cut the mustard
if ('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
const toggleButtons = document.querySelectorAll('.js-accordeon__toggle-btn');
const fullTextWrappers = document.querySelectorAll('.js-accordeon__fulltext');
let fullText;
let toggleButtonText;
Array.prototype.forEach.call(fullTextWrappers, fullTextWrapper => {
// Hide all full text on load
fullTextWrapper.setAttribute('hidden', true);
});
Array.prototype.forEach.call(toggleButtons, toggleButton => {
// Show toggle more buttons
toggleButton.removeAttribute('hidden');
// Add listener for each button
toggleButton.addEventListener('click', function () {
fullTextWrapper = this.parentElement.querySelector('.js-accordeon__fulltext');
toggleButtonText = this.querySelector('.js-accordeon__toggle-btn-text');
// Change attributes and text if full text is shown/hidden
console.log(fullTextWrapper.hasAttribute('hidden'));
if (!fullTextWrapper.hasAttribute('hidden')) {
toggleButtonText.textContent = 'Afficher plus';
fullTextWrapper.setAttribute('hidden', true);
toggleButton.setAttribute('aria-expanded', false);
toggleButton.setAttribute('aria-pressed', false);
} else {
toggleButtonText.textContent = 'Reduire';
fullTextWrapper.removeAttribute('hidden');
toggleButton.setAttribute('aria-expanded', true);
toggleButton.setAttribute('aria-pressed', true);
}
});
});
}
No notes defined.