We Keep Coding

individually hiding drop-downs according to one child-jquery

So I've painfully got multiple drop-downs toggling states(hidden and shown) in JQuery but I have some code which tells the side bar which page is active and gives it the style active and I would like a drop down to not be hidden if there is a child active in it.
The top level link which you click to view the drop-down gets given the id "HAC"(has active child) if it has an active child but I think I might be burning my brain out on this.
Here's a jsfiddle page with the working demo of the problem.
the drop down is set out like this in a nav
<ul id="HAC" class='topLevel'>
<li class='subItem'>
<a class="active" href='thatpage.php'>That page</a>
</li>
<li class='subItem'>
<a href='thatotherpage.php'>That other page</a>
</li>
</ul>
thanks in advance for any help

I think what you are looking for is the jQuery :not selector. Here is an update to your fiddle
function dropDowns() {
//for each toplevel li a
$(".topLevel:not(#HAC) li a").each(function() {
//hide subitems if not HAC (has active children)
$(this).hide();
});
//Toggle show them on click
clickToggle();
}

Expand dropdown menu if one of the sub-menu items is active

I have a dropdown menu which is expanded by clicking. The menu is collapsed by default. I would like the menu to appear to be expanded if one of the sub menu pages is active. I hope that's clear. Here is my code.
HTML
<li class="dropdown">
<a class="disablelink" href="#">Carbohydrates, proteins & fats</a>
<ul class="sub_navigation">
<li>Carbohydrates</li>
<li>Proteins</li>
<li>Fats</li>
</ul>
</li>
jQuery
$(document).ready(function() {
$('.dropdown').click(function() {
// When the event is triggered, grab the current element 'this' and
// find it's children '.sub_navigation' and display/hide them
$(this).find('.sub_navigation').slideToggle();
});
$(".disablelink").click(function(e) {
e.preventDefault();
});
});
So if the user is on carbohydrates.php, proteins.php or fats.php i would like the menu to be expanded. I don't know how to do this though. Can anyone help?

When a page is active you would need to give it's link an additional class, for example;
<li class="current_page">Carbohydrates</li>.
Then you can use jQuery to loop through the menu and expand it if any menu item have the class.
$('.dropdown li').each(function() {
if ($(this).hasClass('current_page')) {
$(this).closest('.sub_navigation').slideDown();
}
});
Demo: http://jsfiddle.net/R7gkw/

Animated Drop Down Menu for a Template

I have never used jQuery before and I'm trying to do something really simple but it's been driving me crazy.
I have designed a template for a CMS and now I want to get its menus animated.
The picture below explains the structure of the menu (which is obviously generated by the CMS)
The code below is what I think should work, but it doesn't:
var menuItem = jQuery(".menu:first>li");
var subMenu;
for(var i=0; i<menuItem.length;i++)
{
var li = jQuery(menuItem[i]);
subMenu = li.children("ul");
if (subMenu.length)
li.hover(function(){ li.children("ul").slideToggle(250); });
}
Basically, what I'm doing is get the first level lis and then add a hover listener to them, telling them to animate their child ul (which is the actual sub menu).
What I get instead is when I point to "Products" it's own sub menu does not show, instead, the sub menu for "Contact Us" pops up! When I point to "Contact Us" its sub menu pops up like it is supposed to. Note: The brown ul is set to display:none
I appreciate any help.
Thank in advance
PS: I'm using jQuery 1.7.1 (if it matters)

It looks quite complicated for what your trying to achieve. i would do something like this.
$(".menu > li").hover(
//When mouse is over the menu button
function () {
$(this).children("ul").slideDown(250);
},
//When mouse leaves the menu / menu button
function () {
$(this).children("ul").slideUp(250);
}
);

I see what you're trying to do in your code but I think you should start with good jQuery practices first. It's really not hard, you'll see. And it will make your life a lot easier.
First of all, I'm not sure a loop is what you want here. jQuery offers a selector (which can be used with $ as a shortcut) to select classes and it's really powerful.
Build your menu like this (sort of):
<ul id="menu">
<li class="menu-item">Home
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="menu-item">Products
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="menu-item">Contact us
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
Then you can select the menu items with
$('.menu-item')
and in its hover function, select the drop down with
$(this).childen('ul')
Then basically have fun!

Losing dropdown list info on mouseout

I have built a simple dropdown list which I populate with various links. It contains about 50 items, so I wrapped it in a div to make it scrollable. Problem is, when I mouseout, I lose the whole list, unless the first two list elelments are showing. I have constructed this dropdown as a submenu, with the first two links as the 'container' of sorts.
I somewhat understand why I am losing the entire list, but can't figure out how to make the top links reapear on mouseout.
$('.myMenu > li').bind('mouseover', openSubMenu);
function openSubMenu() {
$('.myMenu').css('overflow','auto');
$('.myMenu').css('height','400px');
$('.ulMenu').css('visibility', 'visible');
};
$('.myMenu > li').bind('mouseout', closeSubMenu);
function closeSubMenu() {
$('.myMenu').css('overflow','hidden');
$('.myMenu').css('height','20px');
$('.ulMenu').css('visibility', 'hidden');
}
}
</script>
<div id="menu">
<ul class="myMenu">
<li id="li_left"> Application </li>
<li id="li"> Hover For Listing
<ul id="tasksUl" class="ulMenu">
</ul>
</li>
</ul>
</div>

I think you also have to post your .css for the list. I think you got a menu and you wanna open a list on hovering <li id="li"> Hover For Listing
You are setting a
$('.myMenu').css('height','20px');
and I don't get why you would do that. Also your .css styles are pretty much deprecated.
Check the fiddle here: http://jsfiddle.net/eR2y9/1/
Works like a charm. There is no need for you to add a height for the menu because it's dynamically adjusting depending on the amount of entries inside. Also if set to display none it's not taking any space away.. If you have further questions or if I misunderstood your problem feel free to reply to my post and I will find a solution for ya.

Swap a class of an <li> on click

I am trying to swap the selected class from tab to tab to display which one is current
Sample Code
$("li.selected").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[#href='"+id+"']",set).addClass("selected");
for(i in list)
$(list[i]).hide();
$(id).fadeIn();
return false;
});
so on click I am trying to remove and load the selected class with no luck, tried this
<ul class="idTabs">
<li class="selected">Request more information</li>
<li>Request a test drive</li>
<li>Make an offer</li>
<li>Get a quote</li>
</ul>
$('.idTabs li').click(function(){
$('.idTabs li').removeClass('selected');
$(this).addClass('selected');
return false;
});

Aaron, your second example seems like it should work, but only works on the first two list items for some reason. I added classes to the li's to make the selector more specific and it works fine now.
<ul class="idTabs">
<li class="navTab selected">Request more information</li>
<li class="navTab">Request a test drive</li>
<li class="navTab">Make an offer</li>
<li class="navTab">Get a quote</li>
</ul>
$('.navTab').click(function(){
$('.navTab').removeClass('selected');
$(this).addClass('selected');
return false;
});
Regarding your comment below:
It works every time when you click on an li... does not work when clicking on the anchor text because the click handler is not attached to that. You should add "display: block;" to your anchor within your li to expand the click area to the entire li (you will need to remove the padding from your li and in turn pad your 'a' so that the entire li is clickable). then... move the click handler to the anchor and have it change the parent's (li) class. I'm thinking it should go something like this (I'm not able to test it out right now):
$('.navTab a').click(function(){
$('.navTab').removeClass('selected');
$(this).parent().addClass('selected');
return false;
});

Give all your tabs a class like 'tab', then try something along the lines of this:
$('li.tab').click(function(){
$('.tab').removeClass('slected');
$(this).addClass('selected');
return false;
});

You haven't really said what the problem is, but I'm guessing your selectors aren't quite right. You seem to be passing in the "set" class as a second argument, rather than as part of the selector string.
Try:
$("a," + set).removeClass("selected")
and
.filter("[#href='"+id+"']" + set)