Reputation: 2478

Link to another tab within accordion, embedded links will not work

I have an accordion within a tab, I would like to create a link within the accordion to link to another accordion within another tab.

This is the code I have so far:

$(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, because jquery-ui require an integer
                        ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                    }else{
                        setHash(1,'');
                    }
                    setHash(0, tabHash);
                }
            },
            // Make sure to parseInt hash value, because jquery-ui require an integer
            // Remove the " || 0 " if you want all to be closed
            active: parseInt(getHash(0)) || 0
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">

<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><a href="#tab2">This should take you to tab2</a></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>

Thanks to Code-Source for providing the code for the hash function

So, if you look at tab 1, accordion 1, you could see that I have created a link that should take you to tab2 but it doesn't work, that link works only if I enter it in the address bar. Any idea why and how to fix?

EDIT: Sorry I didn't make this clear at the original post, I basically would like to have the ability to link to another tab or another accordion within another tab using that hash.

Thanks

Upvotes: 4

Answers (3)

user2560539

Reputation:

To open accordion inside other tab, first use a custom data attribute to specify the index of the accordion to be opened, in the below example data-accordion-target is used.

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><a href="#tab2" data-accordion-target="0">This should take you to tab2 accordion 1</a></p>
            </div>
            <h3>Tab1 Accordion 2</h3>
            <div>
                <p><a href="#tab3" data-accordion-target="1">This should take you to tab3 accordion 2</a></p>
            </div>
        </div>
    </div>
    <div id="tab2">
        <h2>Tab2 Header</h2>
        <div class="accordion">
            <h3>Tab2 Accordion 1</h3>
            <div>
               <p><a href="#tab1" data-accordion-target="0">This should take you to tab1 accordion 1</a></p>
            </div>
            <h3>Tab2 Accordion 2</h3>
            <div>
                <p><a href="#tab3" data-accordion-target="0">This should take you to tab3 accordion 1</a></p>
            </div>
        </div>
    </div>
    <div id="tab3">
        <h2>Tab3 Header</h2>
        <div class="accordion">
            <h3>Tab3 Accordion 1</h3>
            <div>
               <p><a href="#tab1" data-accordion-target="1">This should take you to tab1 accordion 2</a></p>
            </div>
            <h3>Tab3 Accordion 2</h3>
            <div>
               <p><a href="#tab2" data-accordion-target="1">This should take you to tab2 accordion 2</a></p>
            </div>
        </div>
    </div>
</div>

Use jQuery trigger to navigate to the desired tab, and re-load the accordion of that tab while setting which accordion option will be active.

In the example below, the addition in your code is for a set of internal links inside your tab accordions

        $(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, because jquery-ui require an integer
                                ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                            }else{
                                setHash(1,'');
                            }
                            setHash(0, tabHash);
                        }
                    },
                    // Make sure to parseInt hash value, because jquery-ui require an integer
                    // Remove the " || 0 " if you want all to be closed
                    active: parseInt(getHash(0)) || 0
                });
            });
    ////////////////////////Addition to your code/////////////////////
     var internalLinks = $(".accordion").find("a");
     $.each(internalLinks,function(i,v){
      $(v).on('click',function(e){
        var h3Index = parseInt($(v).attr("data-accordion-target"));
        e.preventDefault();
        var id = $(v).prop("href").split("#")[1];
        $("li").find("a[href=#"+id+"]").trigger("click");     
        //$($( "#"+id).find("h3")[h3Index]).trigger("click");
        $( "#"+$(v).prop("href").split("#")[1]).find(".accordion").accordion('option','active', h3Index);
       }); 
     });
    /////////////////////////////////////////////////////////////////////
        });

http://jsbin.com/qebocevete/edit?html,js,output

Upvotes: 1

seahorsepip

Reputation: 4809

Here's my solution, triggers the click on the tab with click();

$("#tabs > ul li a").each(function(){
    var tab = $(this);
    $("#tabs > div a[href="+tab.attr("href")+"]").on("click", function(e) {
        e.preventDefault();
        tab.click();
    });
});

Upvotes: 1

Shady Alset

Reputation: 5714

Simply you can use .trigger('click') event to goto tab2 like this:

$('#gotoTab2').click(function(){
    $(".ui-state-default a[href='#tab2']").trigger('click');
});

gotoTab2: id of <a> tag that should take you to tab2.

<a id="gotoTab2" href="#tab2">This should take you to tab2</a>

See : Working Fiddle

Working Snippet:

$(function() {
    $('#gotoTab2').click(function(){
        $(".ui-state-default a[href='#tab2']").trigger('click');
    });
    $(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, because jquery-ui require an integer
                        ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                    }else{
                        setHash(1,'');
                    }
                    setHash(0, tabHash);
                }
            },
            // Make sure to parseInt hash value, because jquery-ui require an integer
            // Remove the " || 0 " if you want all to be closed
            active: parseInt(getHash(0)) || 0
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<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><a id="gotoTab2" href="#tab2">This should take you to tab2</a></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>

Upvotes: 1

Link to another tab within accordion, embedded links will not work

Answers (3)

Related Questions