Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering?
I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide down effect on all divs instead of just the one being hovered over.
I believe there must be a simpler solution that I am overlooking.
My code can be seen in this 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 two 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;
}
This method works well for a small number of questions, but what if there are many more? My current approach would require creating CSS styling for every single div, which is not practical. There must be a better way to achieve this. Is there a simple solution or perhaps a more complex one?