Having Difficulty With Selector(s) Working Within accordion element group
I have an unordered list of menu items to which I've applied the accordion widget.
Some menu items have other unordered list of submenu items and some do not. The basic accordion functionality at this point seems to allow multiple menu items to be open (submenu items expanded out).
Before and after examples of applying the jquery ui accordion widget to one of the above-mentioned menu items can be found at
http://pastebin.com/GVFKjtBZ
The top portion of the code example shows what one of the original menu items looks like originally, before the accordion is applied to it.
The middle portion of the code example shows the "jQuery" code that I'm using to apply the accordion to the unordered list of menu items.
The bottom portion of the code example shows what the same menu list item looks like after the accordion widget is applied to it.
But now I have an additional requirement of applying a class of 'active' to the latest selected (click event) top-level menu items(li elements), while also removing the 'active' class from the previously selected 'li' group of elements. At the same time I don't want to re-apply the 'active' class to an item that was previously expanded, but which is currently not the active 'li' group selected.
Whenever an 'li' menu item is selected the 'a' tag which immediately follows it has these two classes: "ui-accordion-header-active" "ui-state-active" added to it. So I was hoping to get the class information from the anchor tag immediately following the selected 'li' menu item, to help determine if the item selected was previously selected and expanded or not, by checking the classes applied to it.
If it was previously selected and expanded then when clicked a second time it will closed and no longer be expanded and so I don't want apply the 'active' class to it even though it was just selected.
My problem is that so far I've been unable, for some reason, to properly select the desired anchor ('a') tag. I've tried several different methods when an 'li' menu item is clicked as shown below:
var thisId = jQuery(this).attr("id");
var slctr = "${esc.h}" + thisId;
var anchrIdPrefx = "ui-accordion-";
var anchrIdSuffx = "-header-0";
var rawAnchrSlctr = anchrIdPrefx + thisId + anchrIdSuffx;
var anchrSlctr = "${esc.h}" + anchrIdPrefx + thisId + anchrIdSuffx;
var anchrClsSlctr = "a.ui-accordion-header.ui-helper-reset.ui-state-default.ui-accordion-icons";
var slctdElements = jQuery(slctr);
var slctdAnchrs = jQuery(anchrClsSlctr).filter(anchrSlctr);
var slctedAnchor = jQuery(slctdAnchrs).get(0);
var slctdAnchrHtml = jQuery(slctedAnchor).html();
var scndSlctdAnchrSlctr = "a[id=" + rawAnchrSlctr + "]";
var scndSlctdAnchr = jQuery(scndSlctdAnchrSlctr);
In each case the object I want to get back is the anchor tag item immediately following the 'li' tag which has been clicked. But when I try to look at the html of the object actually selected I keep getting the 'span' tag immediately following the anchor tag that I'm actually trying to get.
So how should I code the selector to correctly grab the needed anchor tag object?
Thanks for the help.