I'm a total noob to JQuery, and I've been tasked with finishing a project beyond my ability.
I've got a series of images each in it's own div with an associated hidden paragraph. I can use simple show/hide script to get the paragraph from the first div to show and hide properly, but once I add more image divs to the mix, the code either opens only the first image's <P> or all the <P>s at once.
CLearly, I need help integrating an EACH loop equivalent.
Here's the code:
<script>
$(document).ready(function(){
$("#showr").click(function () {
$("p:eq(0)").show("slow", function () {
// use callee so don't have to name the function
$(this).next().show("slow", arguments.callee);
});
});
$("#hidr").click(function () {
$("p").hide(2000);
});
});
</script>
<style>
div { padding:0; float:left; position:relative; top: 140px; text-align:center}
p { background:#FFFFFF; margin:3px; width:300px;
display:none; position:absolute; left:45%; top: -20px; text-align:left; z-index: 3000; }
.over { z-index: 3000; }
</style>
</head>
<body>
<div id="belt">
<div class="panel"><img src="images/1.jpg" name="showr" id="showr">
<p><img id="hidr" class="over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price</p></div>
<div class="panel">
<img id="showr" src="images/2.jpg" width="200px" height="300px" alt="light1" />
<p><img id="hidr" class="over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price</p></div>
</div>
</body>
</html>