title: Need to link to a specific part of a javascript program?
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/2SHKp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2SHKp.png" alt="enter image description here"></a></p>
  
  <p>And here is the HTML &amp; JavaScript relative to the program:</p>
  
  <pre><code>&lt;div id="container"&gt;
        &lt;!--Horizontal Tab--&gt;
        &lt;div id="parentHorizontalTab"&gt;
            &lt;ul class="resp-tabs-list hor_1"&gt;
                &lt;li&gt;Where are peanuts made?&lt;/li&gt;
                &lt;li&gt;How are peanuts made?&lt;/li&gt;
                &lt;li&gt;Do I like peanuts?&lt;/li&gt;            
            &lt;/ul&gt;
            &lt;div class="resp-tabs-container hor_1"&gt;
                &lt;div&gt;&lt;p&gt;This page consists of helpful peanuts&lt;/p&gt;&lt;/div&gt;
        &lt;div&gt;&lt;p&gt;
                        &lt;!--vertical Tabs--&gt;
  
                        &lt;div id="ChildVerticalTab_1"&gt;
                            &lt;ul class="resp-tabs-list ver_1"&gt;
                              &lt;li&gt;In what country are peanuts made?&lt;/li&gt;
                              &lt;li&gt;How do they transport peanuts?&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;div class="resp-tabs-container ver_1"&gt;
                              &lt;div&gt;
                                  &lt;p&gt;Please refer to        &lt;a&gt;Page                       1&lt;/a&gt;the             peanut guide, a bunch of random stuff about peanuts here
  &lt;/p&gt;
                              &lt;/div&gt;
  
   $(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
      });
  </code></pre>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>I believe I need an event attribute in my JavaScript, just not sure what event attribute to use in this scenario. </p>
  
  <p>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:)</p>