Question

I have a list:

<ul class="products">
  <li class="products p1">first</li>
  <li class="description p1">first</li>
  <li class="products p2">second</li>
  <li class="description p2">second</li>
  <li class="products p3">third</li>
  <li class="description p3">third</li>
  <li class="products p4">fourth</li>
  <li class="description p4">fourth</li>
</ul>  

and I want to use jquery to:
1-hide other li s when user clicks on one except the clicked one.
2-show all li s when user clicks again on the active li.
I used the script below:

$(window).load(function(){
$(".products li").click(function(){
     if ($(this).hasClass("active")) {
          $(".products li").show("slow");
          $(this).removeClass("active");
     } else {
          $(this).addClass("active");
          $(".products li:not(.active)").hide("slow");
     }
});
});  

It works fine.
now I want to show the related description li for the active li.
for example if the active li is the li with class:p2, then the below description li needs to be shown and othe li s go hidden:

  <li class="description p2">second</li>  

Description li s are hidden at the beginning.
I dont know how to select the correct li according to class name. There should be a jQuery trick to select li s by class name with mask!

Answer 1

Add .active class to next li ($(this).next().addClass("active");), and also change selector to li.products because all li are clickable:

$(window).load(function(){
    $(".products li.products").click(function(){
         if ($(this).hasClass("active")) {
              $(".products li").show("slow");
              $(this).removeClass("active");
              $(this).next().removeClass("active");
         } else {
              $(this).addClass("active");
              $(this).next().addClass("active");
              $(".products li:not(.active)").hide("slow");
         }
    });
}); ​​

JSFiddle Example