Is it open or closed
In the HTML5:
<button aria-expanded="false" class="expandable">Great quote</button>
<div aria-hidden="true" class="expanded-content">
<blockquote>
<p>The last ever dolphin message was misinterpreted as a surprisingly sophisticated attempt
to do a double-backwards-somersault through a hoop whilst whistling the ‘Star Spangled Banner’,
but in fact the message was this: So long and thanks for all the fish</p>
<footer>
— <cite>Douglas Adams</cite>
</footer>
</blockquote>
</div>
In the CSS:
button.expandable + [aria-hidden] {
display: none;
}
button.expandable + [aria-hidden="false"] {
display: block;
}
In the JavaScript, using jQuery
$( document ).ready( function() {
$('.expandable').on('click', function(e) {
e.preventDefault();
let $this = $(this);
$this.attr('aria-expanded', function (i, attr) {
return attr === 'true' ? 'false' : 'true'
});
$this.next().attr('aria-hidden', function (i, attr) {
return attr === 'true' ? 'false' : 'true'
});
});
});