JQuery UI accordion: open tab on 'current' page

Question

Added JQuery accordian to WordPress site to display archived posts. The currently-displayed post has its list-item identified by the class="current-article". Each accordion 'tab' is either a Month (for current year) or a Year.

I have compiled JQuery code that successfully opens the tab of the current article on Page Load. However, two errors occur: 1) The first tab (which is normally the open on by default) is not clickable until another tab has been clicked and opened, and 2) The tab I 'forced' open with my code won't close until it is clicked on again after others have first been clicked.

Here's the markup:

<div id="accordion">
<h3 tabindex="-1" aria-selected="false" aria-controls="ui-accordion-accordion-panel-0" id="ui-accordion-accordion-header-0" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>June</h3>
<div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-0" id="ui-accordion-accordion-panel-0" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<ul>                                        
    <li><a href="http://linkaddress.co.uk" rel="bookmark" title="Article One">Article One</a></li>
        <li><a href="http://linkaddress.co.uk" rel="bookmark" title="Article Two">Article Two</a></li>
    </ul>
</div>
<h3 tabindex="0" aria-selected="true" aria-controls="ui-accordion-accordion-panel-1" id="ui-accordion-accordion-header-1" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>May</h3>
<div aria-hidden="false" aria-expanded="true" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-1" id="ui-accordion-accordion-panel-1" style="display: block;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<ul>                                    
    <li class="current current-article"><a href="http://linkaddress.co.uk" rel="bookmark" title="Article Three">Article Three</a></li>
    </ul>
 </div>
 <h3 tabindex="-1" aria-selected="false" aria-controls="ui-accordion-accordion-panel-2" id="ui-accordion-accordion-header-2" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>February</h3>
 <div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-2" id="ui-accordion-accordion-panel-2" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
  <ul>                                  
       <li><a href="http://linkaddress.co.uk" rel="bookmark" title="Article Four">Article Four</a></li>
        <li><a href="http://linkaddress.co.uk" rel="bookmark" title="Article Five">Article Five</a></li>
    </ul>
  </div>
</div>      

And here's my script code (which is simply placed in the head):

    $(document).ready(function() {
    $('h3.ui-accordion-header-active').attr('tabindex', '-1');
    $('h3.ui-accordion-header-active').attr('aria-selected', 'false');
    $('div.ui-accordion-content-active').prev().removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all');
    $('div.ui-accordion-content-active').css("display","none");
    $('div.ui-accordion-content-active').attr('aria-expanded', 'false');
    $('div.ui-accordion-content-active').attr('aria-hidden', 'true');
    $('div.ui-accordion-content-active').removeClass("ui-accordion-content-active");
    $('li.current-article').closest("div").addClass("ui-accordion-content-active");
    $('div.ui-accordion-content-active').attr('aria-expanded', 'true');
    $('div.ui-accordion-content-active').attr('aria-hidden', 'false');
    $('li.current-article').closest("div").css("display","block");
    $('div.ui-accordion-content-active').prev().removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top');
    $('h3.ui-accordion-header-active').attr('tabindex', '0');
    $('h3.ui-accordion-header-active').attr('aria-selected', 'true');
});

I'm no Java expert (as you can probably guess) - I've just step-by-step stripped out 'active' classes and attributes for the default 'active' tab, and put assigned them to the 'current' tab.

I've compared the markup or various states with and without my code to see if there's anything I've missed, but I can't see any differences.

Is my issue to do with timing of when my changes are applied? Or do my changes 'lock' something which gets released when clicked again?

Cheers.

Answer 1

Ok - learnt a little more today... rather than trying to edit all the markup, I should merely simulate a 'click event. Simples.

So rather than that bloated chunk of script code, I replaced with this:

    $(document).ready(function() {
        if ($('#accordion').length) {   
            $('li.current-article').closest("div").prev("h3").click();
        }
    });

This looks for the article marked 'current-article' and then 'clicks' it's associated h3 header.