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>
<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

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