jQuery Forum

Hi,

I've been struggling with this problem too.
I had an accordion with a link "know more" in each panel (pointing to a different page depending on the panel), and I wanted the panel to be open on the page corresponding to the link "know more".

It worked well with "navigation" option, but since I moved to jQuery UI 1.9, I had to find another solution.

Here's what i've found :

1. var current = window.location.pathname; // Get the current url path (like /page.html)
   var findToggler = $('#accordion a[href$="' + current +'"]').parents('li'); // Find if there is link in the accordion that matches the current url and get its container (here it's a li)
   
   var indexToggler;
   if(findToggler.length) { // If we got a match
       indexToggler = findToggler.index(); // We get the index of the accordion element
   } else {
       indexToggler = 0; // If not, we open the first accordion element
   }
   $('#accordion').accordion({
       heightStyle: "content",
       active: indexToggler // Var to open the accordion
   });
   

1. <ul id="accordion" class="accordion">
       <li>
           <h2 class="accordion-toggler">
               Accordion 1
           </h2>
           <div class="accordion-body">
               <a href="page.html">Know more</a>
           </div>
       </li>
       <li>
           <h2 class="accordion-toggler">
               Accordion 2
           </h2>
           <div class="accordion-body">
               <a href="page2.html">Know more</a>
           </div>
       </li>
       <li>
           <h2 class="accordion-toggler">
               Accordion 3
           </h2>
           <div class="accordion-body">
               <a href="page3.html">Know more</a>
           </div>
       </li>
   </ul>
   

My HTML structure is particular, but I think you'll get it right for yours.