Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Dennis Eitner
Full Stack JavaScript Techdegree Graduate 25,644 PointsActive status of jquery menu
I have a vertical jquery menu and I would like that it remains open, when the current site is selected. The Website runs on wordpress. Here is some code. If anybody could help, that would be awsome!
<nav class="menu-hauptmenu-container"><ul id = "nav" class = "menu"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item current_page_parent menu-item-has-children menu-item-20"><a href="http://vino-e-altro.lo/news/">News</a>
<ul class="sub-menu">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://vino-e-altro.lo/">Hallo Welt!</a></li>
</ul>
</li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://vino-e-altro.lo/ueber-uns/">Über uns</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://vino-e-altro.lo/kontakt/">Kontakt</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://vino-e-altro.lo/rotwein/">Rotwein</a></li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="http://vino-e-altro.lo/weisswein/">Weisswein</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://vino-e-altro.lo/schaumwein/">Schaumwein</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://vino-e-altro.lo/rosewein/">Rosewein</a></li>
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://vino-e-altro.lo/bestellen/">Bestellen</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://vino-e-altro.lo/test/">test</a></li>
</ul></nav>
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
$('#nav a.active').each(function(){
$(this).next().show();
});
</script>
2 Answers
Erwin Meesters
15,088 PointsI think you can accomplish this with the jquery accordion() function. jquery accordion. There are also Wordpress plugins available, maybe this one might do the trick: Wordpress plugin
Erwin Meesters
15,088 PointsIf you want to use the accordion function you will have to add two links to you head section:
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
and a link to an external stylesheet:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
Take a look at jquery ui for more information and different styles.
After that apply the accordion function to your #nav id: