how to show repeating divs on mouse over with jquery? - php

Question

for example ive got a div like:
<div class="y1">
<img src="i/o.png" />
</div>
and
<!-- pre load -->
<div class="p1" style="display:none">
<h5 class="ob">Title</h5>
<img class="ob" src="i/ob.png" />
<small class="ob">Description</small>
PLAY
</div>
and this jquery
<script type="text/javascript">
$("div.y1").hover(
function () {
$('div.p1').slideDown('slow', function() {
});
}
);
</script>
my question is how can i repeat it for 12 times. i mean when i hover on y1, show p1, y2 => p2, y3 => p3 ... y12 => p12. i hope you guys understand me. thank you so much!!!!

Answer 1

Should look like:
$(function(){
$('div[class^=y]').hover(function(){
var self = $(this),
number = this.className.slice(1);
$('div.p' + number).slideDown('slow', function() {
});
}, function() {
var self = $(this),
number = this.className.slice(1);
$('div.p' + number).slideUp('slow', function() {
});
});
});
Example: http://www.jsfiddle.net/Q5Ug2/

Answer 2

I'm going to assume that your y# divs are inside a div with the id container. Secondly, I'm going to assume that none of your y# divs have any other classes applied to them.
$('#container').delegate('div[class^=y]','mouseenter', function(){
$('div.p' + this.className.slice(1)).slideDown('slow');
}).delegate('div[class^=y]', 'mouseleave', function(){
$('div.p' + this.className.slice(1)).slideUp('slow');
});
This uses delegate to avoid the cost of binding to multiple DOM elements.
Edit To hide the p# div on hovering on another element, you can use this code.
$('#container').delegate('div[class^=y]','mouseenter', function(){
$('div.p' + this.className.slice(1)).slideDown('slow').siblings().slideUp();
});

Answer 3

Do things a bit differently..
Use ID's for the p# and y# series indicators.
On your DIV tags for the p# series, add a title of the y# series.. so <div id="p1" title="y1">
On your DIV tags for the y# series, add a class.. <div id="y1" class="hoverMe">
$('div.hoverMe').hover( function() {
$('[title=' + $(this).attr('id') + ']').slideDown('slow');
});