CODEWITHSUNDEEP
javascriptjqueryjquery-uitabsaccordion
dawall
dawall

Reputation: 7

jQuery UI - Open Accordion within Tabs with an external link

I´d like to open an Accordion within an Tab per external link. For example: www.demosite.com/site#tab1&2 should open the first tab and inside the tab the second accordion.

So far I get the specific Tab open with the following code:

$( "#tabs" ).tabs({
  collapsible: true,
  select: function(event, ui) {
    window.location.hash = ui.tab.hash;
  }
});

For opening the Accordion I thin I should use the active Function of jQuery UI Accordion, but I don´t know, how I can use both.

Can anyone help me out?

http://jsfiddle.net/bMeLL

Upvotes: 0

Views: 2312

Answers (2)

Code-Source
Code-Source

Reputation: 2245

You should split the hash, to have both information in it.

Example 1: #0|1 will open first tab and second panel
Example 2: #1|0 will open second tab and first panel

For that, i created 2 functions: getHash and setHash.

$(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
        });
    });
});

I did a fork here: http://jsfiddle.net/9nKZp/1/
And the result here: http://jsfiddle.net/9nKZp/1/show/

Upvotes: 1

erlingormar
erlingormar

Reputation: 461

In the .accordion()-call, you want to use active: N where N is the index of the accordion you want to expand (it accepts a number, but your fiddle uses it like a boolean).

Now you just need to provide the value of N rather han my hardcoded value of 1. Building on your ui.tab.hash-method might work.

There are a few different methods of retrieving querystring parameters, but your URL is going to have to be something like demosite.com/site?tab=1&accordion=2. Do some research on how to get querystring parameters into Javascript variables.

Here's a fork of your fiddle

Upvotes: 1

Related Questions