Accordion Widget
Build an animated, accessible accordion with ARIA attributes and smooth height animation.
jQuery
Intermediate
4 min read
Custom Accordion Widget
Example
$(function() {
$(".accordion-trigger").attr("aria-expanded", "false").next("[role=region]").hide();
$(".accordion-trigger").on("click", function() {
const $panel = $(this).next("[role=region]");
const open = $(this).attr("aria-expanded") === "true";
// Close all (exclusive mode)
$(".accordion-trigger").attr("aria-expanded","false");
$("[role=region]").stop(true).slideUp(300);
// Open clicked one if it was closed
if (!open) {
$(this).attr("aria-expanded","true");
$panel.stop(true).slideDown(300);
}
});
}); Pro Tip
aria-expanded="true/false" on the trigger and role="region" on the panel satisfy ARIA accordion pattern requirements.