Affect only the onhover div tag with JQuery and SLidedown() function

Question

Is there a way to create a JQuery slidedown() function that will be assigned only on the div where the mouse is focusing on.

This kind of thing is possible with the combination of JQuery but I managed to achieve only this: I can make it work only if every div has separate class. If I name them the same, it will open (slide down) all of the div tags on the hover of the first div.

So, I hope it is an easy solution that I cannot see.

My code is below:

FIDDLE

HTML

<div class="q1">1. Question (on hover)<br/>
<div class="desc1">Description: Here goes the question one from the php variable</div>
<br/></div>
<div class="q2">2. Question (on hover)<br/>
<div class="desc2">Description: Here goes the question two from the php variable</div>
<br/></div>
<div class="q3">3. Question (on hover)<br/>
<div class="desc3">Description: Here goes the question three from the php variable and so on</div>
<br/></div>

JQUERY

jQuery(function () {
  for (var i = 0; i < 100; ++i) {
    (function (i) {
        jQuery('.desc' + i).hide(); 
        jQuery('.q' + i).hover(
            function () {
                jQuery('.desc' + i, this).stop(true, true).delay(300).slideDown(300);
            },
            function () {
                jQuery('.desc' + i, this).stop(true, true).slideUp(200);            
            });
     }(i));
  }});

CSS

.desc1,.desc2,.desc3 {
    font-size: 12px;
    font-style: italic;
}

.q1,.q2,.q3 {
    font-weight:bold;
}

So, this is working when there is only 3 questions, but what about a hundred? With my code it will be pointless to create css for every div, so I know there is a simple solution :) or not :(

Answer 1

The Fiddle: http://jsfiddle.net/GzxJf/4/

The Script:

jQuery(".desc").hide();

jQuery(".q").hover(function(){
    jQuery(this).find(".desc").stop().slideDown("slow");
}, function(){
    jQuery(this).find(".desc").stop().slideUp("slow");
});

Answer 2

Here is one potential solution that may work for you:

*Updated Demo Fiddle

Since you don't know how many questions there may be, or if some will be loaded or removed dynamically, I would delegate off of the wrapping element (in this case the document). Then all you need to do is be consistent with your classes in the questions.

EDIT - In the hopes to avoid confusion, I've gone ahead and updated this to add a wrapping element to avoid binding on the document. See below:

HTML:

<div class="q-wrapper">
    <div class="q">1. Question (on hover)<br/>
    <div class="desc">Description: Here goes the question one from the php variable</div>
    <br/></div>
    <div class="q">2. Question (on hover)<br/>
    <div class="desc">Description: Here goes the question two from the php variable</div>
    <br/></div>
    <div class="q">3. Question (on hover)<br/>
    <div class="desc">Description: Here goes the question three from the php variable and so on</div>
    <br/></div>
</div> 

JS:

$('.q-wrapper').on('mouseenter mouseleave','.q', function(e){
    if (e.type === 'mouseenter'){
        $(this).find('.desc').stop(true, true).slideDown();
    }
    else {
        $(this).find('.desc').slideUp();
    }
});

Answer 3

In your code there is a parameter this which will point on the divs where the mouse cursor is. So, actually, this will work fine as you can see in my fiddle below.

Just change a little your code (css classnames and jQuery elements) and it will work.

FIDDLE

HTML

<div class="q">1. Question (on hover)<br/>
<div class="desc">Description: Here goes the question one from the php variable</div>
<br/></div>
<div class="q">2. Question (on hover)<br/>
<div class="desc">Description: Here goes the question two from the php variable</div>
<br/></div>
<div class="q">3. Question (on hover)<br/>
<div class="desc">Description: Here goes the question three from the php variable and so on</div>
<br/></div>

jQuery

jQuery(function () {
  for (var i = 0; i < 100; ++i) {
    (function (i) {
        jQuery('.desc').hide(); 
        jQuery('.q').hover(
            function () {
                jQuery('.desc', this).stop(true, true).delay(300).slideDown(300);
            },
            function () {
                jQuery('.desc', this).stop(true, true).slideUp(200);            
            });
     }(i));
  }});

CSS

.desc {
    font-size: 12px;
    font-style: italic;
}

.q {
    font-weight:bold;
}