Accordion Nested in tabs

by freedawirl

HTML

<div id="tabs">
	<ul>
		<li><a href="#tab1">tab1</a></li>
		<li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
	</ul>
    <div id="tab1">
		<h2>Tab1 Header</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>
    <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>
    <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>
</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 = ''
 ...