I have this code:

<ul>
 <div class="sub_cat_box"> 

 <li class="current"><a href="#">Cat 1</a></li> 
   <ul> 
     <li><a href="#">Prod1</a></li> 
     <li><a href="#">Prod1</a></li> 
   </ul> 

 </div> 

 <div class="sub_cat_box"> 

 <li class="current"><a href="#">Cat 2</a></li> 
   <ul> 
     <li><a href="#">Prod1</a></li> 
     <li><a href="#">Prod1</a></li> 
   </ul> 

  </div> 
</ul> 

I want to show/hide each child <ul> when I click the <li class='current'>. I tried with jQuery, but I didn't make it.

I have this code:

<ul>
 <div class="sub_cat_box"> 

 <li class="current"><a href="#">Cat 1</a></li> 
   <ul> 
     <li><a href="#">Prod1</a></li> 
     <li><a href="#">Prod1</a></li> 
   </ul> 

 </div> 

 <div class="sub_cat_box"> 

 <li class="current"><a href="#">Cat 2</a></li> 
   <ul> 
     <li><a href="#">Prod1</a></li> 
     <li><a href="#">Prod1</a></li> 
   </ul> 

  </div> 
</ul> 

I want to show/hide each child <ul> when I click the <li class='current'>. I tried with jQuery, but I didn't make it.

• javascript
• jquery
• html

• 2 -1 He didn't try at all, that's what I read from his question. – aefxx Commented Nov 8, 2012 at 10:36
• Your HTML fragment doesn't look valid; suggest you validate it and then include it in the question. – FixMaker Commented Nov 8, 2012 at 10:37

8 Answers 8

Use jQuery to select li elements with the class selector, then bind an event handler to the click function. The bound function should find the next ul relevant to the selected element and call the toggle method upon it. By default the jQuery toggle method will toggle the visibility of an element:

$(".current").click(function(){
  $(this).next("ul").toggle();
});

Working example: http://jsfiddle/ytXFQ/

Your HTML is not correct.

Try it with this HTML structure:

<ul>
 <li class="current">
    <a href="javascript: toggleChildren('cat1');">Cat 1</a>
    <div class="sub_cat_box" id="cat1">
      <ul> 
        <li><a href="#">Prod1</a></li> 
        <li><a href="#">Prod1</a></li> 
      </ul> 
    </div>
  </li> 
</ul>

Function:

function toggleChildren(id) {

   var elem = document.getElementById(id);
   if(!elem) alert("error: not found!");
   else {

      if(elem.style.display == "block")
         elem.style.display = "none";

      else
         elem.style.display = "block";
   }
}

CSS:

.sub_cat_box {display: none;}

Your HTML is not valid (only il is allowed inside ul, and div and other uls must be inside lis). It should be something like this:

<ul>

    <li class="current"><div class="sub_cat_box"> 
       <a href="#">Cat 1</a>
       <ul> 
         <li><a href="#">Prod1</a></li> 
         <li><a href="#">Prod1</a></li> 
       </ul> 
       </div> 
      </li> 
     <li class="current">     
      <div class="sub_cat_box"> <a href="#">Cat 2</a> 
       <ul> 
         <li><a href="#">Prod1</a></li> 
         <li><a href="#">Prod1</a></li> 
       </ul>         
      </div> 
    </li>
    </ul> 

Once it is done like that, you can apply code like this:

$(".current").click(function(e){
     $(this).find('ul').toggle();
})

$('li.current').on('click', 'a', function() {
  $(this).parent().find('ul').toggle();
  return false;
});

$('li.current a').click(function(){
  $(this).parent().next('ul').slideToggle(); // or
  //$(this).parent().next('ul').toggle();
});

Use this:

$(document).on("click", "li.current > a", function(){
   $(this).next().slideToggle();
});

You can do it like this:

$('.current').next('ul').hide();​​​ // Make them hide by default
  $('.current').click(function(){
     $(this).next('ul').slideToggle();
  });

LIVE DEMO

Try this:

$("ul > li.current").on('click', 'a', function(){
      $('ul.class').children().toggle();
    });

Where class is your ul class. This is the cleanest jQuery code, I think.