The accordion is an immensely useful pattern for progressive disclosure — highlighting important details of a section and revealing more details upon a tap or click, if necessary. As a result, the design stays focused and displays critical information first, while everything else is easily accessible. But for designing a well functioning accordion you have to consider a lot of things to make the pattern understandable for all users.
Expand / Collapse
To give the panel the needed expand/collapse effect we created a script. This will expand/collapse the panel and also uses tabindex for screen readers to skip the focus for hidden elements
function toggle_height(element) {
let li_elem = element.closest("li.awesome-accordion-item");
let ac_elem = li_elem.find(".awesome-accordion-panel");
if (li_elem.hasClass("closed"))
{
ac_elem.css("max-height", "400px");
li_elem.removeClass("closed");
li_elem.find(".awesome-accordion-btn").attr("aria-expanded", "true");
li_elem.find(".awesome-accordion-panel *").removeAttr("tabindex");
$(".awesome-accordion-panel").attr("tabindex", 0);
}
else
{
ac_elem.css("max-height", 0);
li_elem.addClass("closed");
li_elem.removeClass("opened");
li_elem.find(".awesome-accordion-btn").attr("aria-expanded", "false");
li_elem.find(".awesome-accordion-panel *").attr("tabindex", -1);
$(".awesome-accordion-panel").attr("tabindex",-1);
}
}
Scroll in panel
If the content in a panel is very long it will push the other panels down making you to lose the overview of the accordion. For this reason we think it is important that you should be able to scroll the text inside the div.
By using overflow: auto and setting a max-height we can solve this issue.
Toggle buttons
Since we are asking users to open/close panels manually we also need to give them an option to collapse / expand all panels at the same time. This helps users to reset the accordion to its initial state or helps them to open all panels for users. who don't want to open them one by one
For this we created two alternative controls to toggle between open all and close all, we use an unordered list to group them together.
$(document).on("click", "[data-accordion-action]", function () {
if ($(this).data("accordion-action") === "openall")
{
$(".awesome-accordion-item").removeClass("closed");
$(".awesome-accordion-panel").css("max-height", "none");
}
else if ($(this).data("accordion-action") === "closeall")
{
$(".awesome-accordion-item").addClass("closed");
$(".awesome-accordion-panel").css("max-height", 0);
}
});
Print screen
A big problem with accordions is that the content is hidden in a print screen. For this we created the following script. It will expand all panels when a user uses the print screen command.
var beforePrint = function () {
$(".awesome-accordion-item").removeClass("closed");
$(".awesome-accordion-panel").css("max-height", "none");
};
var afterPrint = function () {
$(".awesome-accordion-item").addClass("closed");
$(".awesome-accordion-panel").css("max-height", 0);
$(".awesome-accordion-item").first().removeClass("closed").find(".awesome-accordion-panel").css("max-height", 400);
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
if (mql.matches) {
beforePrint();
}
else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
Hash Option
The hash option allows users to quickly skip from one accordion section to another. The way it works is that the opened panel is the one with the hash.
Code
In the code, we are checking if hash # exists and if we are in the page that contains accordions. Then we check for the button that matches with the hash and simulates a click event and close the rest of accordions.
if( window.location.hash && $(".js-open-close-acc[data-hash]").length > 0 ) {
let key = window.location.hash;
key = key.substring(1);
$(".awesome-accordion-item").addClass("closed");
$(".awesome-accordion-panel").css("max-height", 0);
$(".js-open-close-acc[data-hash='"+key+"']").click();
}
Example
As you can see in the accordion demo, the first item has #item-1 and the second item #item-2 and so on. Each time the click event occurs the opened accordion replaced the hash item in the URL. These are the respective URLs with the hash options :
All accordions closed: https://awesome-accordions.awesome-plugins.com/demo-collapse/
The first item opened: https://awesome-accordions.awesome-plugins.com/demo-collapse/#item-1
The second item opened: https://awesome-accordions.awesome-plugins.com/demo-collapse/#item-2
The third item opened: https://awesome-accordions.awesome-plugins.com/demo-collapse/#item-3
Example
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed sed risus pretium quam vulputate dignissim. Ipsum consequat nisl vel pretium lectus. Sodales ut etiam sit amet nisl purus in. Et malesuada fames ac turpis. Pretium lectus quam id leo in vitae. Mauris pharetra et ultrices neque ornare aenean. Consectetur adipiscing elit duis tristique. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Blandit massa enim nec dui nunc mattis enim ut tellus. Lacus viverra vitae congue eu consequat ac felis donec. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Nam aliquam sem et tortor consequat id. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Imperdiet dui accumsan sit amet.
-
Aliquam ultrices sagittis orci a scelerisque purus semper eget. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. In tellus integer feugiat scelerisque varius. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Egestas dui id ornare arcu odio ut sem. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Libero justo laoreet sit amet cursus sit. Dolor morbi non arcu risus quis varius quam quisque id. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lorem sed risus ultricies tristique nulla aliquet enim. Viverra mauris in aliquam sem. Aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit pellentesque. Dui vivamus arcu felis bibendum ut tristique et. Feugiat vivamus at augue eget arcu. Sapien eget mi proin sed.
-
Egestas sed sed risus pretium quam vulputate. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Viverra nibh cras pulvinar mattis nunc. Sem et tortor consequat id porta nibh venenatis. Vulputate ut pharetra sit amet aliquam id. Tortor condimentum lacinia quis vel eros. Malesuada proin libero nunc consequat interdum varius sit. Nisl nunc mi ipsum faucibus vitae aliquet. Lectus nulla at volutpat diam ut venenatis tellus. Ut tellus elementum sagittis vitae et. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nisi lacus sed viverra tellus in hac. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Sed lectus vestibulum mattis ullamcorper velit.
