CMTA- Real Estate: Accordion Nested in tabs

by freedawirl

HTML

<div id="tabs">
	<ul>
		<li><a href="#tab1">License Agreement</a></li>
		<li><a href="#tab2">Railroad ROW </a></li>
    <li><a href="#tab3">Media Request</a></li>
	</ul>
  
  <!-- Tab1 Accordion -->
    <div id="tab1">
		<h2>License Agreement - Installations within Capital Metro right-of-way</h2>
		<div class="accordion">
			<h3>Tab1 Accordion 1</h3>
			<div>
                <p>Tab1 Accordion 1 Content</p>
            </div>
            <h3>Tab1 Accordion 2</h3>
			<div>
                <p>Tab1 Accordion 2 Content</p>
            </div>
        </div>
    </div>
      <!-- Tab2 Accordion -->
    <div id="tab2">
		<h2>Tab2 Header</h2>
		<div class="accordion">
			<h3>Tab2 Accordion 1</h3>
			<div>
                <p>Tab2 Accordion 1 Content</p>
            </div>
            <h3>Tab2 Accordion 2</h3>
			<div>
                <p>Tab2 Accordion 2 Content</p>
            </div>
        </div>
    </div>
      <!-- Tab3 Accordion -->
    <div id="tab3">
		<h2>Tab3 Header</h2>
		<div class="accordion">
			<h3>Tab3 Accordion 1</h3>
			<div>
                <p>Tab3 Accordion 1 Content</p>
            </div>
            <h3>Tab3 Accordion 2</h3>
			<div>
                <p>Tab3 Accordion 2 Content</p>
            </div>
        </div>
    </div>
    
    
    <!-- End Tabs -->
</div>

JavaScript

$(function() {
  $(document).ready(function() {
    var getHash = function(key) {
      var parts = window.location.hash.substr(1).split(/\|/);
      var _key = parseInt(key) || 0;
      return _key < parts.length ? parts[_key] : false;
    };
    var setHash = function(key, value) {
      var parts = window.location.hash.substr(1).split(/\|/);
      var _key = parseInt(key) || 0;
      parts[_key] = value
      window.location.hash = '#' + parts.join('|');
    };
    $(".accordion").accordion({
      heightStyle: "content",
      collapsible: true,
      animated: 'slide',
      navigation: true,
      activate: function(event, ui) {
        if (ui.newHeader.length > 0) {
          // A new accordion panel is open
          setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
        } else {
          // In case accordion panel is closed
          setHash(1, '');
        }
      },
      active: false
    });

    $("#tabs").tabs({
      collapsible: true,
      activate: function(event, ui) {
        if (ui.newTab.length > 0) {
          // A new tab is open
          var tabHash = ui.newTab.parent().children().index(ui.newTab);
          if (tabHash == getHash(0)) {
            // In case current tab is the one in Hash, we open wanted accordion panel
            // Make sure to parseInt hash value, because jquery-ui require an integer
            ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
          } else {
            setHash(1, '');
          }
          setHash(0, tabHash);
        } else {
          // In case we close tab, hash is cleared
          window.location.hash = ''
        }
      },
      create: function(event, ui) {
        if (ui.tab.length > 0) {
          var tabHash = ui.tab.parent().children().index(ui.tab);
          if (tabHash == getHash(0)) {
            // In case current tab is the one in Hash, we open wanted accordion panel
            // Make sure to parseInt hash value,...