Deep linking to an accordion tab with Visual Composer

by

I am using Visual Composer to add an accordion to my page. Now I need to be able to deep link to arbitrary elements in the accordion. In other words, I need to be able to provide people with links that will open an arbitrary element in the accordion. So, a url like /mypage#tab4 might used open the 4th accordion tab. Is it possible to do this?

The documentation doesn’t mention it. The source code doesn’t appear to support it. And, I don’t have a support account with WPBakery because I’m not the original developer.

2 Answers
2

After having the same issue, I’ve come up with a basic solution – hopefully it’s not too late for you.

The Visual Composer “accordion plugin” seems to be a wrapper around the jQuery UI accordion; so the same methods are available. I’ve written some basic (room for improvement no doubt) code that checks if there is a hash on the end of the URL, and then match that up to an accordion panel (gets an index number for it), and then open it. It just requires you to add an ID to each of the accordion items in the CMS.

jQuery(window).load(function() {
    if(location.hash) {
        var panelRef = (window.location.hash.substring(1));  
            jQuery(".wpb_accordion_section").each(function(index) {
            if(jQuery(this).attr("id") == panelRef) {
                jQuery('.wpb_accordion_wrapper').accordion("option", "active", index);
            }
        });     
    }
});

You could modify it to use numbers instead of hard-coded IDs (remember the panels will be 0 indexed though).

Leave a Comment