CODEWITHSUNDEEP
javascriptjqueryjquery-uiaccordion
leigero
leigero

Reputation: 3283

How do you find the index of an accordion tab containing a specific element within a jQuery UI Accordion?

I have an accordion (an archive) of links/dates. When a user clicks one I am trying to have the accordion expand to the current selected link. To do this, I search the accordion for the link which matches the current URL and would like to then expand the accordion to that link.

JSFiddle

HTML

<div class="desktop">
    <div id="blog-archive-accordion">
        <h3 id="archive" class="title">Archive</h3>
        <div id="blog-archive-accordion-year">      
            <h4>2016</h4>       
            <ul>
                <li class="month">November (0)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=10">October</a> (5)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=9">September</a> (11)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=8">August</a> (8)</li>
                ....
            </ul>
            <h4>2015</h4>       
            <ul>
                <li class="month">November (0)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=10">October</a> (5)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=9">September</a> (11)</li>
                <li class="month"><a class="current-archive-link" href="/website/archive?filter[year]=2016&amp;filter[month]=8">August</a> (8)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=7">July</a> (9)</li>
                ....
            </ul>
            <h4>2014</h4>       
            <ul>
                <li class="month">November (0)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=10">October</a> (5)</li>
                <li class="month"><a class="" href="/website/archive?filter[year]=2016&amp;filter[month]=9">September</a> (11)</li>  
                ....              
            </ul>
        </div>
    </div>
</div>

Javascript

// Accordionize the above structure.
$(function() {
    $("#blog-archive-accordion").accordion({ header: "h3" });
    $("#blog-archive-accordion-year").accordion({ header: "h4"  });
});

// Find the current url in the accordion links (obv. doesn't work like this in JSFiddle)
//var selectedArchiveLink = $('#blog-archive-accordion').find("a[href='" + location.pathname + location.search +"']").parent();
var selectedArchiveLink = $('#blog-archive-accordion').find(".current-archive-link").parent();
if(selectedArchiveLink.length > 0){
    selectedArchiveLink.addClass("current-archive-link"); // Style the current link

    // How do I know where the found link was?
    $('#blog-archive-accordion-year').accordion('option', 'active', 1);
}

In the above example I'm forcing the accordion ope with .accordion('option', 'active', 1); but I would like to know how to find the index of the found link. Considering the index in accordions is based on heading tags and not the actual index in the accordion.

IE:

<h4></h4>
<ul></ul>
<div></div>
<h4></h4>
<div></div>

would accordion on the two <h4> tags and the index of the second one is 3 not 1 like you would need for this .accordion() function.

Upvotes: 1

Views: 650

Answers (2)

Dekel
Dekel

Reputation: 62566

You can use the index function to get the index/place of the current element inside the parent (and you can use it also based on the tagname)

selectedArchiveLink.parent().index('ul')

Check the example:
http://jsfiddle.net/tg4hc9zr/

Upvotes: 1

kveldurty
kveldurty

Reputation: 1

you might be looking for this. Just add this function to your accordion function call and it will give you the index of h4 tag. Hope this helps.

  activate: function(evt, widget ) {
        var index = $(this).find("h4").index(widget.newHeader[0]);            
    }


$("#blog-archive-accordion-year").accordion({ 
       header: "h4",
       activate: function(evt, widget ) {
            var index = $(this).find("h4").index(widget.newHeader[0]);            
        }    
    });

Upvotes: 0

Related Questions