How do I open an active subitem in an accordion on page load using Wayfinder?

☆ A M B ☆
326 Posts

aladage Reply #1, 17 years, 2 months ago

This is probably more of a JQuery question than a Wayfinder question, but I’m hoping someone here can still help me.

I’m using Wayfinder to build a relatively complicated menu structure (two-level horizontal menu across the top with a lefthand menu on the left for items deeper than the top nav levels). Miraculously, I have everything working, with one exception. Check out this page:

http://adventolathe.net/index.php?id=55

In the lefthand menu, my menus are being built correctly, and I even have my CSS applying the correct styles to the active item. However, you’ll notice that the menu is completely collapsed (if on the left you click "Our Worship," you’ll see the active item I want to display). How do I, in the JavaScript, make it open to the active tab on page load?

Here’s a link to a blog post about the script. In the script, it describes how to make one category to open automatically like I want to do, but I can’t get it to work:

http://www.i-marco.nl/weblog/archive/2008/05/08/simple_jquery_accordion_menu

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 17 years, 2 months ago

JQuery has a method for indicating what element should be open on page load. http://www.packtpub.com/article/jquery-ui-accordion-widget-part1

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,390 Posts

kongondo Reply #3, 17 years, 2 months ago

Quote from: aladage at Jul 26, 2009, 03:38 PM

This is probably more of a JQuery question than a Wayfinder question, but I’m hoping someone here can still help me.

I’m using Wayfinder to build a relatively complicated menu structure (two-level horizontal menu across the top with a lefthand menu on the left for items deeper than the top nav levels). Miraculously, I have everything working, with one exception. Check out this page:

http://adventolathe.net/index.php?id=55

In the lefthand menu, my menus are being built correctly, and I even have my CSS applying the correct styles to the active item. However, you’ll notice that the menu is completely collapsed (if on the left you click "Our Worship," you’ll see the active item I want to display). How do I, in the JavaScript, make it open to the active tab on page load?

Here’s a link to a blog post about the script. In the script, it describes how to make one category to open automatically like I want to do, but I can’t get it to work:

http://www.i-marco.nl/weblog/archive/2008/05/08/simple_jquery_accordion_menu

Heres’ how I did it some few months ago now...

http://modxcms.com/forums/index.php/topic,33496.msg203811.html#msg203811

Basically, add the "expandfirst" class to the outerTpl. Hope it helps.

e.g.

<ul id="menu1" class="menu collapsible expandfirst">
	[+wf.wrapper+]
</ul>

Cheers
/k

Nice site btw. A small friendly suggestion: it is not obvious to the user that the side menus expand; Maybe offer a cue, say a plus (+)?

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

☆ A M B ☆
326 Posts

aladage Reply #4, 17 years, 2 months ago

Thanks for the tips, and I appreciate the link to the other forum post, but unless I’m reading something wrong, I don’t see anything that addresses the JQuery issue I’m having. I can get MODx to apply classes to all of the correct elements through the tpls, but I can’t seem to get JQuery to do anything with them.

I will check out the link tot he JQuery documentation, too -- thanks! I’m just not that strong in JQ, which is holding me back a little.

1,390 Posts

kongondo Reply #5, 17 years, 2 months ago

Sorry that didn’t help. I thought you were using Marco’s script as is and he already provides that functionality via the "expandfirst" class? It is only the expand first that is not being applied?. Maybe I didn’t understand your question

.

Have you tested the menu outside MODx and confirmed that it is working properly?

~~Since the other bits of the jquery menu are working, maybe the problem is that you have applied Wayfinders’ hideSubMenus parameter?~~ It don’t affect nothing...hmmm..Some js clash maybe?

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

☆ A M B ☆
326 Posts

aladage Reply #6, 17 years, 2 months ago

The "expandfirst" method would work, but it won’t always be the first menu I need expanded. He explains in the comments on the blog how to change this behavior, but that’s what I can’t get working. Oh well -- I may just try a different accordion script and see if that solves the issue.

1,390 Posts

kongondo Reply #7, 17 years, 2 months ago

OK, I get you...

/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

☆ A M B ☆
326 Posts

aladage Reply #8, 17 years, 2 months ago

Thanks for the tip on some sort of indicator that the left menus can be expanded. I’m actually considering not using an accordion at all, and just having it fully expanded all the time. Do you think that would look strange?

1,390 Posts

kongondo Reply #9, 17 years, 2 months ago

Quote from: aladage at Jul 27, 2009, 09:37 AM

Thanks for the tip on some sort of indicator that the left menus can be expanded. I’m actually considering not using an accordion at all, and just having it fully expanded all the time. Do you think that would look strange?

If it’s long, yes laugh

/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

956 Posts

ganeshXL Reply #10, 17 years, 2 months ago

insert a unique id:

<li class="active">
    <a href="http://adventolathe.net/index.php?id=48" title="Our Worship">Our Worship</a>
    <ul style="display: block;" id="expandsecond">

then change accordion.js accordingly:

	$.each($('ul.menu'), function(){
		$('#' + this.id + '.expandfirst ul.active').show();
		$('#expandsecond').show();
	});

http://www.fantastique.ch/
http://www.dnik.ch/
http://www.flickr.com/photos/dnik/