Question

I don’t know if the title is all apt…… but here is my situation….i have a class called dropper and another class drop_list…these two are sub-classes of the class drop_head, the drop_list has to drop down whenever the dropper is clicked…

---

           <div class="drop_head">
              <div class="dropper"> Content-1</divr>
              <div class="drop_list"> List-1</div>
           </div>
           <div class="drop_head">
              <div class="dropper"> Content-2</divr>
              <div class="drop_list"> List-2</div>
           </div>

---

when content-1 is clicked list-1 has to toggle and when content-2 is clicked list-2 has to drop down… how do i achieve this using single jquery..?? thanks in advance……

Answer 1

If i understand you correctly this should be pretty simple:

$('.drop_head').each(function(i,e){
   $('.dropper', e).click(function(){
      $('.drop_list', e).slideToggle();
   });
});

by using the .drop_head as the context for the list and clickable element you dont need to use id’s. additionally if you omit a list or dropper by accident it will only screw up that one “widget” and wont effect the others, which wouldnt be the case with closest.