Skip to: Hash Option

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

 

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