Toggle Accordion Attributes for Accessibility

	$(".accordion-trigger").click(function () {
	$(this).toggleAttrVal("aria-expanded", "false", "true"); //toggle trigger attribute
	$(this)
	.siblings(".accordion-content")
	.toggleAttrVal("aria-hidden", "true", "false"); //toggle content attribute
	});

	// jquery toggle just the attribute value
	$.fn.toggleAttrVal = function (attr, val1, val2) {
	var test = $(this).attr(attr);
	if (test === val1) {
	$(this).attr(attr, val2);
	return this;
	}
	if (test === val2) {
	$(this).attr(attr, val1);
	return this;
	}
	// default to val1 if neither
	$(this).attr(attr, val1);
	return this;
	};

view raw toggle-accordion-attributes.js hosted with ❤ by GitHub

Enhance the accessibility of an accordion component by toggling an aria-expanded attribute when the accordion is opened or closed.

.accordion-trigger would be the button that triggers the accordion to open and close on click, and should start with an attribute of aria-expanded="false" that is set within the Webflow Designer. The direct sibling element to the trigger would have the class of .accordion-content and is what is changed with interactions to be hidden/shown and size is set to 0/auto.

For another great accessible accordion example see: https://webflow.com/accessibility/checklist/task/ensure-accordions-are-keyboard-navigable