Skip to: Usability

Awesome Accordions website


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.find(".awesome-accordion-btn").attr("aria-expanded", "true");
           li_elem.find(".awesome-accordion-panel *").removeAttr("tabindex");
           $(".awesome-accordion-panel").attr("tabindex", 0);
           ac_elem.css("max-height", 0);
           li_elem.find(".awesome-accordion-btn").attr("aria-expanded", "false");
           li_elem.find(".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-panel").css("max-height", "none");
       else if ($(this).data("accordion-action") === "closeall")
           $(".awesome-accordion-panel").css("max-height", 0);

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-panel").css("max-height", "none");
   var afterPrint = function () {
       $(".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) {
           else {
   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.


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-panel").css("max-height", 0);




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:

The first item opened:

The second item opened:

The third item opened:



  • 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.

Ready to build better team pages?

Get it for $29.00

What's so awesome about us?

  • Open source

    Our plugins are 100% open source and developed transparently on Bitbucket. Anyone can join the development and contribute.

  • Works with your theme

    Our plugins are carefully crafted to keep your site fast, the html is easy to read and extend and we provide the option to disable js and css files from the settings page.

  • Well documented

    Our plugins are well documented with in our knowledge base. It’s a great way to find instant answers or read tutorials to almost every question!.

  • Excellent support

    All our plugins come with full support. We’re here to help and offer expert advice on how to get the most out of your plugin.

  • Money back garantee

    We have a very simple refund policy. We will try to fix issues first. If we can't, we will definitely give your money back.

  • Regular updates

    We are regularly working to improve the plugin by adding new features, fixing bugs and keeping updated with the latest WordPress version.

Back To Top