Easy Responsive Tabs to Accordian, Show correct tab when adding custom tab id to url

Question

I'm currently using the "Easy Responsive Tabs Plugin by author: Samson.Onna"; https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion/blob/master/js/easyResponsiveTabs.js

By default the script assigns a id to each tab which in turn is appended to the url when the tab is clicked, this can also be referenced in the url (http://mysite.co.uk/#horizontalTab3) this for instance will show tab 3.

I would like to tweak this to use my tabs custom id instead of the default hash url. (/#horizontalTab1)

This is that script below. It's unmodified and from what I can tell is the section that will need the amendments...

// Show correct content area
var tabNum = 0;
if(hash!='') {
var matches = hash.match(new RegExp(respTabsId+"([0-9]+)"));
if (matches!==null && matches.length===2) {
    tabNum = parseInt(matches[1],10)-1;
    if (tabNum > count) {
        tabNum = 0;
    }
}
}

Below actions the "clicked tabs" hash to be saved and used as the hash in the URL...

What I've done is modify the original script slightly, now it uses an id that I have given to each tab.
so the url for each tab is more google friendly and looks something like this (http://mysite.co.uk/#tab-id). The original script is still their, just commented out.

//Update Browser History
if(historyApi) {
    var currentHash = window.location.hash;

    //var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString();
    var newHash = $respTabs.find('ul.tabs-list li.tab-active').attr('id');

    if (currentHash!="") {

    //var re = new RegExp(respTabsId+"[0-9]+");
        var re = $respTabs.find('ul.tabs-list li.tab-active').attr('id');

        if (currentHash.match(re)!=null) {                                  
            newHash = currentHash.replace(re,newHash);
        }
        else {
        //newHash = currentHash+"|"+newHash;
            newHash = '#'+newHash;
        }
    }
    else {
        newHash = '#'+newHash;
    }

    history.replaceState(null,null,newHash);
}
});

Then in my HTML I have this

    <ul class="tabs-list">
        <li id="choose-your-package">CHOOSE YOUR PACKAGE <div class="active-arrow"></div></li>
        <li id="chi-tour" class="demo-tab">CHI TOUR <div class="active-arrow"></div></li>
        <li id="extras-and-addons">EXTRAS + ADDONS <div class="active-arrow"></div></li>
        <li id="tech-specs">TECH SPECS <div class="active-arrow"></div></li>
    </ul><!-- /.tabs-list -->
    <div class="tabs-container">

        <div> <!-- Tab #1 -->
            <?php include('_product-tabs--package.php'); ?>
        </div><!-- / Tab #1 -->


        <div> <!-- Tab #2 -->
            <?php include('_product-tabs--demo.php'); ?>                
        </div> <!-- / Tab #2 -->


        <div> <!-- Tab #3 -->
            <?php include('_product-tabs--extras.php'); ?>                      
        </div> <!-- / Tab #3 -->


        <div> <!-- Tab #4 -->
            <?php include('_product-tabs--tech-specs.php'); ?>                      
        </div> <!-- / Tab #4 -->

    </div><!-- /.tabs-container -->

THANKS IN ADVANCE!

Answer 1

Fixed it, anyone else with this problem add this to the bottom of your responsiveTabs.js.

// if the URL contains a hashtag, trigger click on that tab.
if (window.location.hash !== '') {
    var hasHash = window.location.hash;
    $('#product-tabs').find(hasHash).click();
}

$('.tabs-list li').on('click', function(e){
    var theid = $(this).attr('id');
    $(theid).click();
});

I created a Git Repo with this fix added https://github.com/aaronsummers/EasyResponsiveTabs-CustomTweaks