Browse By

Jquery – Stay on the same accordion tab after window reloads

The accordion displays collapsible content panels for presenting information in a limited amount of space. Refer to jQuery UI for more.

HTML

<div id="accordion">
    <a class="menuitem" href="#1">Header 1</a>
    <div>CONTENT 1</div>
    <a class="menuitem" href="#2">Header 2</a>
    <div>CONTENT 2</div>
</div>

Setting an html anchor in your URL (like #your-anchor) will not trigger the accordion code, you are simply instructing the browser to navigate to the anchored element !

You will need to add JavaScript code to get the value of the anchor and pass this parameter to your accordion widget as shown in this jQuery code.

jQuery

Make sure either to run on DOM ready or at the bottom of the page.

$(document).ready(function () {

    $("#accordion").accordion({
        active: false,
        collapsible: true,
        autoHeight: false,
        navigation: true,
        header: 'a.menuitem'
    });

    //Pass anchor value to url
    $(".menuitem").click(function (event) {
        window.location.hash = this.hash;
    });

    //get the hash value
    var locationHash = window.location.hash;

    //split the value
    var hashSplit = locationHash.split('#');

    //get the tab number
    var currentTab = hashSplit[1];

    window.setTimeout(function () {
        //open the tab for the current hash
        $("#accordion").accordion({
            active: parseInt(currentTab) - 1
        });
    }, 1000);

});

You can also refer to StackOverflow for more answers.

View Demo

Latest Posts