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.

  • 1
    Please note that questions highly specific to extensions (more so commercial ones) are considered not in scope here. You need someone with very specific expertise, be it original developers or someone specializing in it. – Rarst May 6 '15 at 18:17
  • 1
    If its out of scope, its out of scope. I cant complain about that. Regarding your second point, isnt this a community of people with very specific expertise and specializations? – Jeff May 6 '15 at 22:15
  • 1
    Also, there are plenty of open and answered questions on this site about Visual Composer so I'm not sure your first point holds true. wordpress.stackexchange.com/search?q=visual+composer – Jeff May 6 '15 at 22:19
  • Unfortunately the amount and scope of WP extensions is wildly wide. Historically we don't have enough experts to handle this reliably. Your search nets several dozen questions out of 56 thousands. Eventually we adjusted the scope just to be honest that for such questions you are more likely to get good answers elsewhere, because that's the reality of it. – Rarst May 6 '15 at 22:28

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


I know it's a little late, there is a much easier way to do this. Go to Add Element ID to each tab, if we name it custom1 for instance then if your went to (www.yourdomain.com/#custom1) that will redirect to the certain tab you want. As long as your tabs are on your homepage.

It works on all pages so you can link a tab on home page to redirect to another page with your tabbed content, let's say your About page then your url will look like this (www.yourdomain.com/about/#custom1) for our linked tab we set earlier.

You can get creative a little with the element id for instance custom1-more-info for your doomin would like like this: (www.yourdomain.com/#custom1#more#info) if you notice your dashes (-) are defined as (#) within your linking.

Hope this helps someone, little easier than the above solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.