Calling a class within Jquery

Question

I want to call a class within jquery.

<nav class="small-nav">
<ul>
<li><a href="#">Home</a></li> </ul>
</nav> <!-- End of small-nav -->
<script>$('.handle').on('click', function() 
{$('nav .small-nav ul').toggleClass('open'); 
});
</script>

However this doesn't work. I've tried replacing as

$('small-nav ul') or $('.small-nav ul') or $("nav '.small-nav' ul")
or $('nav.small-nav ul')

and it doesn't seem to work.

I know the code is fine because when I remove the class from the nav and when I call just the nav ul as shown below, it works.

<nav>
<li><a href="#">Home</a></li>
</nav>
<script>$('.handle').on('click', function() 
{$('nav ul').toggleClass('open'); 
});
</script>

So can someone please tell me how I can call the specific class? Or is it not working because I am trying to call a class within another class (open) ? How do I fix it so that I can call that particular nav class and not all nav in my website.

Thanks for reading.

• Arun P Johny: there is no ul in your markup.. so use <nav class="small-nav"> <ul> <li><a href="#">Home</a></li> </ul> </nav> then $('nav.small-nav ul')
• Sid: ul or li you want to use?
• Gosi: Sorry I forgot to add the ul when posting, I'll edit it now.
• Shaunak D: Try wrapping your code in document.ready

Answer 1

Try with find(); like this

<script>
$(document).ready(function(){
 $('.handle').on('click', function(){
 $('nav.small-nav').find('ul').toggleClass('open'); 
 });
})
</script>

Jquery doc

Answer 2

$('nav > .small-nav ul').toggleClass('open');

Answer 3

Your jQuery does not work because you are looking for the .small-nav element inside the nav (nav .small-nav), not a .nav element which has that class (nav.small-nav). Try this:

<nav class="small-nav">
 <ul>
 <li><a href="#">Home</a></li>
 </ul>
</nav>
<script type="text/javascript">
 $('.handle').on('click', function() {
 $('nav.small-nav ul').toggleClass('open'); 
 });
</script>

This code is obviously assuming that you have an element with the class handle in your code - as it is not shown in your OP example.

• Gosi: Yea I already have the ul. I forgot to type it out here. Edited my original post. Sorry.
• Gosi: Yea I do have the handle class. Just that i forgot to add to here again, lol. But this new one still doesn't work. I've tried this.
• Rory McCrossan: @gosi123 have you checked the console for errors? Is jquery.js included in your page?
• Gosi: I used the jquery from google developers, so basically I just pasted the link to my head section. I think the whole code is fine, because if I remove all classes in nav , it works. I just want to call a specific nav instead of all nav.

Answer 4

Your first solution didnt worked because you have wrong selector for targetting nav with class small-nav. also ensure that events are attached when dom isready.You need to use:

<script>
$(function(){
$('.handle').on('click', function(){ 
$('nav.small-nav ul').toggleClass('open'); 
});
});

• Gosi: I used the google web developers jquery code. I pasted the link to my head section.