how to show repeating divs on mouse over with jquery?

Question

hello. 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>
<a href="#" class="oyna">PLAY</a>
</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

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');
});

Answer 3

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();
});