Need to link to a specific part of a javascript program?

Question

I have the following program, that is essentially just a fancy list. However I need to link to a specific part of the program via links on other pages on the site. here is what the program looks like:

And here is the HTML & JavaScript relative to the program:

<div id="container">
      <!--Horizontal Tab-->
      <div id="parentHorizontalTab">
          <ul class="resp-tabs-list hor_1">
              <li>Where are peanuts made?</li>
              <li>How are peanuts made?</li>
              <li>Do I like peanuts?</li>            
          </ul>
          <div class="resp-tabs-container hor_1">
              <div><p>This page consists of helpful peanuts</p></div>
      <div><p>
                      <!--vertical Tabs-->

                      <div id="ChildVerticalTab_1">
                          <ul class="resp-tabs-list ver_1">
                            <li>In what country are peanuts made?</li>
                            <li>How do they transport peanuts?</li>
                        </ul>
                        <div class="resp-tabs-container ver_1">
                            <div>
                                <p>Please refer to        <a>Page                       1</a>the             peanut guide, a bunch of random stuff about peanuts here
</p>
                            </div>

 $(document).ready(function() {
    //Horizontal Tab
    $('#parentHorizontalTab').easyResponsiveTabs({
        type: 'default', //Types: default, vertical, accordion
        width: 'auto', //auto or any width like 600px
        fit: true, // 100% fit in a container
        tabidentify: 'hor_1', // The tab groups identifier
        activate: function(event) { // Callback function if tab is switched
            var $tab = $(this);
            var $info = $('#nested-tabInfo');
            var $name = $('span', $info);
            $name.text($tab.text());
            $info.show();
        }
    });

    // Child Tab
    $('#ChildVerticalTab_1').easyResponsiveTabs({
        type: 'vertical',
        width: 'auto',
        fit: true,
        tabidentify: 'ver_1', // The tab groups identifier
        activetab_bg: '#fff', // background color for active tabs in this group
        inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
        active_border_color: '#c1c1c1', // border color for active tabs heads in this group
        active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
    });

            $('#ChildVerticalTab_2').easyResponsiveTabs({
        type: 'vertical',
        width: 'auto',
        fit: true,
        tabidentify: 'ver_2', // The tab groups identifier
        activetab_bg: '#fff', // background color for active tabs in this group
        inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
        active_border_color: '#c1c1c1', // border color for active tabs heads in this group
        active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
    });

So essentially we have a tabular layout with vertical selections, as well as horizontal ones that show something in a window to the right. The user selects the horizontal main category they want, and then the particular question they want under that, to show the answer in the box to the right.

Obviously I can link to a specific part of a page using an ID selector. The problem is that I need to automatically open a specific tab and respective side tab that involves a particular question.

For example, I have a question on another page that says "In what country do they make peanuts," when the page loads I want the page loaded to open the "How are peanuts made" tab, and preferably the "In what country are peanuts made" vertical tab.

I believe I need an event attribute in my JavaScript, just not sure what event attribute to use in this scenario.

Obviously I left certain parts of the script out, there is content that I can not post here was the reason behind it. Also, not actually working on a site about peanuts:)

Answer 1

The idea is to put the desired horizontal and vertical tabs in the hash part of the url, like this: http://example.com/some/page#1/2 where in this example 1 is the index of the horizontal tab and 2 is the index of the vertical tab. The general hash pattern will be {zero-based-index}/{zero-based-index} . The, when the document loads, parse the hash value of the url, then simulate click on the tabs selected by the hash, if any.

<script>
$(document).ready(function() {
    var selectedTabs = getTabsFromHash(window.location.hash);
    if(!selectedTabs)  {
        return;
    }

    $('#parentHorizontalTab > ul > li:eq(' + selectedTabs.horizontalTab + ')').click();
    $('#ChildVerticalTab_1 > ul > li:eq(' + selectedTabs.verticalTab + ')').click();
});

function getTabsFromHash(hash)
{
  var matchedParts = /(\d+)\/(\d+)/i.exec(hash);
   if(matchedParts !== null){
      return {
         horizontalTab: matchedParts[1],
         verticalTab: matchedParts[2],
      };
   }

    return null;
}
</script>

See the demo: https://jsfiddle.net/xt66ee5k/