Links active in an accordion

[bogus]

As discussed in this thread css-tricks.com/forums/topic/links-in-a-accordion-menu/ I have an accordion that looks like this http://jsfiddle.net/gdqfa6h7/4/.

I attached a script that adds a class to a visited link so I can mark it active although the page reloads. It works just fine except for the collapsed part of the menu.
When the page reloads, the menu is collapsed again.

Anyone knows how to get it to be open when I’ve clicked a link in the collapsed sections?

[Paulie_D]

Hmmm. Do you really want the ‘menu’ open when you’re on the sub-page?

That doesn’t sound right to me but I suppose it might work in vertical menu in a sidebar.

You could have to select the item with a class of ‘current-page’ find the parent li of the li a in question and then expand it.

[Paulie_D]

This works BUT…it’s not quite there.

If the .active_page is applied to a top level menu it opens the submenu.

I’m thinking a better selector (or separate function) would be required.

http://jsfiddle.net/gdqfa6h7/14/

[bogus]

Hi Paulie!

I managed to find a menu that accomplishes exactly what I need.

http://jsfiddle.net/Lzd5ogfe/

Unfortunately it won’t let me have “real” links (a-tag behavior) for the two menu items (Item One & Item Two) at the top. Also those two Items don’t toggle.

I’m stuck..

[Paulie_D]

It’s certainly possible based on my limited JQuery knowledge…it’s just a matter of defining the right function(s) and adding removing classes.

For instance, if we added an if/else statement/function to my poor effort to distinguish between top level and sub-level links etc. before applying set classes &/or expanding.

[ThatCat]

Something like this?

http://jsfiddle.net/Lzd5ogfe/1/

[Paulie_D]

Not really…we need the accordion to be open if a sub-menu link has a class of .active_page

http://jsfiddle.net/gdqfa6h7/14/

As I said, this works but it also opens the sub-menu if the TOP level menu link has a class of ‘active_page’

[bogus]

Guys guys! My script (http://jsfiddle.net/Lzd5ogfe/3/) got a lot of bells and whistles I know but all that URL reading stuff is needed in my page to read if the link in the menu is the current page. In case it is, the accordion stays open although the page refreshed.

I only need toggle for the top links (Item One & Item Two)

[Paulie_D]

i dunno…it seems that you switched requirements in there somewhere.

Frankly, I think you should break this down into separate functions.

Your first example had the toggle down fine…no need to change it.

Also, you have the ‘active_page’ link thing most of the way there…leave that too.

So the only thing you need to do is get the third function….open the sub-menu accordion if it contains an anchor with the active page class.

It shouldn’t be that hard.

Now, eventually, you might be able to combine no.2 and no.3 but that something for another day.

[Paulie_D]

Hmmm…this seems to work…

http://jsfiddle.net/gdqfa6h7/24/

[bogus]

Thanks Paulie for your efforts it’s highly appreciated!

found the problem: Just put in SlideToggle instead of slideDown and everything works fine.

Thanks again!

[Author]

Posts