Develop Reference

How do I correctly addClass to an element using jquery?

I have a nav, each li item containing their own specific class. I want the nav li item to be "active" while the user is on the current page, by adding an "active" class to the current li item. But it's not working and Im not sure why. This could be a stupid mistake so please forgive me
Here's what I have:
$(function(){
$('a.intro-page').addClass('active');
});

Your current code is adding the active class the the <a> element. It sounds like you want to add it to the <li> tag that the link is in instead?
If that's the case, something like this would work:
$(function(){
$('a.intro-page').parent('li').addClass('active');
});

Change CSS class using jQuery

I am trying to show which menu item is the active one when it's clicked on by reassigning a css class to the list item using jQuery. I've looked at some examples online and tried some different ones, but I can't seem to get mine to work at all. Can someone look at my code from my last try and tell me what I am doing wrong? Thanks for your help.
Script in HEAD tag:
<script type="text/javascript" src="script/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#topnavi ul li a").click(function () {
if ($(this).parent("li").hasClass(".select"))
$("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
$(this).parent("li").removeClass(".norm").addClass(".select");
});
});
</script>
HTML:
<div id="topnavi">
<ul>
<li class="select">HOME</li>
<li class="norm">ABOUT US</li>
<li class="norm">SERVICES</li>
<li class="norm">PACKAGES</li>
<li class="norm">COMMENTS</li>
<li class="norm">CONTACT US</li>
<asp:LoginView ID="lvBackgroundSound1" runat="server">
<RoleGroups>
<asp:RoleGroup Roles="administrator"><ContentTemplate><li class="norm">ADMIN</li></ContentTemplate></asp:RoleGroup>
</RoleGroups>
</asp:LoginView>
</ul>
</div>
When a new anchor in a list item is clicked on, I would like to assign the "norm" class to the list item surrounding the previously selected anchor and assign the "select" class to the list item surrounding the newly selected anchor.

You don't need the dot before the class name when using hasClass, addClass and removeClass.
Change
if ($(this).parent("li").hasClass(".select"))
$("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
$(this).parent("li").removeClass(".norm").addClass(".select");
to
if ($(this).parent("li").hasClass("select"))
$("#topnavi ul li a").parent("li").removeClass("select").addClass("norm");
$(this).parent("li").removeClass("norm").addClass("select");

In conjunction with Tobias' answer, you might want to add some opening brackets to this part of the code
if ($(this).parent("li").hasClass(".select")) {
$("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
$(this).parent("li").removeClass(".norm").addClass(".select");
}
Or something along those lines. You could also use .toggleClass() instead of removing and adding the classes.

Adding to what Tobias already mentioned, change
if ($(this).parent("li").hasClass(".select"))
$("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
$(this).parent("li").removeClass(".norm").addClass(".select");
To
$("#topnavi ul li").removeClass("select").addClass("norm");
$(this).parent("li").removeClass("norm").addClass("select");
This will make sure select class is assigned only to the selected li and rest other li elements will have norm class.

Expand/Collapse List in HTML with JavaScript

Friends, I am working on JavaScript for collapse/Expand <UL> list.
here is my Code. I am wanted to work on it, in Nth Level, i can show Child, but its not hiding Children.
I hope you guys will help me..
Thanks in Advance...

This will do the trick:
event.stopPropagation();
Docs.
If you debug your code you'll see that the event is being called for each parent ul. Check this out:
$("#ExpList ul li:has(ul)").click(function(event) {
event.stopPropagation();
$(this).find('> ul')
.toggleClass("hiddenChild")
.toggleClass("displayChild");
});
And the HTML:
<div id='ExpList'>
<ul>
<li>Platform-1
<ul class='hiddenChild'>
<li>Child-1
<ul class='hiddenChild'>
<li>P-C-C-1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Fiddle.
HTML considerations:
I don't know if you can use a div wrapping the whole list, but I think it would make more sense doing it;
You're using the id ExpList for all ul. This is not how we use an id. Instead, for selecting many elements use its own tag or a common class;
I removed the onClick = openChild() which were present in all ul. It was throwin an error in your fiddle.
JavaScript considerations:
You don't have to mix a selector with a find this way $("#ExpList").find('li:has(ul)'). You can just use it on the same selector, as I did $("#ExpList ul li:has(ul)");
You don't need to search for all ul children($(this).children('ul')) since you'll have just one, I used this instead, which looks for just one: $(this).find('> ul');
As said before, the event.stopPropagation() does the trick. You don't need to trigger click event on all parent ul.
In CSS, I just changed #ExpList to this #ExpList ul to work in the new structure. I hope it helps.

JQuery Accordion issue due to CMS output

I am having an issue due to the way my CMS I am using outputs navigational items. I have asked this question before and have received a solution that should work however due to JS not being my strong point I don't get it. A short background. My CMS outputs a menu item like:
<ul id="amenu">
<li>Home</li><li><span class="currentbranch0">
Content</span>
<ul class="multilevel-linkul-0" title="">
<li>Content 2</li>
<li><span class="currentbranch1">Content 3</span></li>
</ul>
</li>
</ul>
Wheres the issue? Well the CMS outputs the active selector class in a span, as well as incrementing it depending on the level, currentbranchN as can be seen from the code.
I have received help on here on another thread, and we have got to this point:
$(document).ready(function () {
$('#amenu > li > a').click(function(){
if ($(this).closest("span[class*='currentbranch']").attr('class') != 'active'){
$('#amenu li ul').slideUp();
$(this).next().slideToggle();
$('#amenu li a').closest("span[class*='currentbranch']").removeClass('active');
$(this).closest("span[class*='currentbranch']").addClass('active');
}
});
});
But it just doesn't work as an accordion, please see JSFiddle here: http://jsfiddle.net/EKe2R/5/. I reckon I am close to getting it working, but as my JS skills are basic at best I cannot seem to get my head around it. I basically need the menu to expand (if a second level item is selected) and highlight the active object, currentbranch1, using the CMS outputted nav items.
Thanks! :)
Nick
Edit: Just to add to this, the main issue the Accordion does not work is that even for second level the CMS outputs for the first level also, causing the code to fail
<span class="currentbranch0"></span>
EDIT::
I am going to try hard coding the thing to slide down, here is the code I have tryed and its failed:
$(document).ready(function () {
$('#amenu > li > a,#amenu > li > span > a').click(function(){
//alert($(this).closest("span[class='currentbranch0']").attr('class'));
if ($(this).closest("span[class='currentbranch0']").attr('class') != 'active'){
$('#amenu li ul').slideUp();
$(this).parents('li').children('ul').slideDown();
$('#amenu li a').closest("span[class='currentbranch0']").removeClass('active');
$(this).closest("span[class='currentbranch0']").addClass('active');
}
});
});
http://jsfiddle.net/GgKyV/1/ Fiddle here
Also how do I get the fiddle to automatically open the accortion is the link is selected, The first level lis will be actual links to web content, not dummys
Cheers

You are selecting the anchor link which is the first child of li element
$('#amenu > li > a')
but in your HTML the anchor link is the second child
<li><span class="currentbranch1">Content 3</span></li>
Also the active class cannot be checked by your method but you can check it by hasClass function.
See if this fiddle works for you
http://jsfiddle.net/fdcd6/1/

Are you expecting below result. please check below link.
http://jsfiddle.net/EKe2R/11/
only js code changed.
$(document).ready(function () {
$('#amenu > li > a,#amenu > li > span > a').click(function(){
//alert($(this).closest("span[class*='currentbranch']").attr('class'));
if ($(this).closest("span[class*='currentbranch']").attr('class') != 'active'){
$('#amenu li ul').slideUp();
$(this).parents('li').children('ul').slideDown();
$('#amenu li a').closest("span[class*='currentbranch']").removeClass('active');
$(this).closest("span[class*='currentbranch']").addClass('active');
}
});
});

Use this...
$('.currentbranch0').on('click', function(){
$(this).next().slideToggle('slow');
});
And see this jSfiddle Example

Creating a simple submenu drop down using jQuery

Here's an example of what I'm aiming for:
I don't like I have to decorate a li element with a class in order to correctly fire the event. What happens if I have more than one nested category drop down? Things get messy quick!
I also can't seem to be able to select an option without it closing as soon as I leave the event capture area.
Any suggestions on how to build a well crafted, drop down navigation menu?

You don't really need any classes with some clever usage of the selectors :P
I set up a fiddle with an example, here's the code:
HTML:
<nav>
<ul>
<li>HOME</li>
<li>
OFFERS
<ul>
<li>
NEW
<ul>
<li>YAY!</li>
</ul>
</li>
</ul>
</li>
<li>SETTINGS</li>
<li>TV's</li>
<li>COMPUTERS</li>
<li>RICE</li>
</ul>
</nav>​
As you see, not a single class/id was needed :P The element "OFFERS" is the only one with a drop-down menu, and inside that menu, the element "NEW" has another one.
CSS:
li > ul { display: none; }
li li { margin-left: 10px; }
The first style is the important one. At first, we want our submenus to be hidden. The other style is just for the sake of clarity.
jQuery:
$("nav ul li").hover(function(){
if ($("> ul", this).length > 0) {
$("> ul", this).show();
}
}, function(){
if ($("> ul", this).length > 0) {
$("> ul", this).hide();
}
});​
Yup, as simple as that :) When we hover a menu element, we check if it has any ul direct children, if it does, we show them. When we leave the menu element, we check again if it has any ul direct children, and if it does, we hide them.
Of course, you'll need to style this up, and make sure your clear any float inside any li.

You would need to use classes to properly control the flow. Especially on your outer container.
For example in my menus i have a ul containing all the menu and each menu item is an li. Inside the li is the first level title, along with another ul containing the submenu.
<ul class="menu">
<li>
Item 1
<ul><!--Further items--></ul>
</li>
<li>
Item 2
<ul><!--Further items--></ul>
</li>
</ul>
You can then control this using child selectors. Although it is sometimes easier to simply use a class.
$(".menu > li") //First level items
$(".menu > li > ul") //Submenus
Say you wanted to make the menu slide down when you clicked on one of the first level items:
$(".menu > li").click(function() {
$this = $(this); //Caching. Not really needed for this example. But anyway :)
$this.children("ul").slideToggle("fast");
});

$(document).ready( function(){
$("ul.MenuNavi li").mouseover(function(){
$(this).children('ul').slideDown('3000');
});
$("ul.MenuNavi li").mouseleave(function(){
$(this).children('ul').stop(true).slideUp('3000');
});
});