Awesome Accordions website

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