Question

I have a hover function (see code below) that gives a drop down paragraph of text on the class I’ve applied it to. This is working fine on the class specified.

$('.job_container').hover(function(){
   $(".job_subheading").animate({top: "30px }, 200);},
      function(){
            $(".job_subheading").animate({
        top: "0px" }, 200);
      });

However I would like to add more of instances of these classes with different drop down paragraphs. When I do and then hover over one, the drop down is applied to all because they have the same class.

Should I change the classes to ids and re-write the code for every instance I wish to use?
Whats the neatest way to apply the code in multiple instances?

Thanks for your help,
Gavin

Answer 1

You should use the children selector:

$('.job_container').hover(function(){
$(this).children(".job_subheading").animate({
top: "30px }, 200);},
                      function(){
$(this).children(".job_subheading").animate({
top: "0px" }, 200);

So, your html must be like this:

<div class="job_container"><div class="job_subheading"></div>something else</div>
<div class="job_container"><div class="job_subheading"></div>something else</div>
<div class="job_container"><div class="job_subheading"></div>something else</div>