Multiple divs with separate hover
Hi all,
I'm new to jQuery and I'm not very familiar yet with Javascript, my area is more PHP.
I have in my html several divs like this:
<div id="container1">
<div id="hidden1">hidden text</div>
</div>
<div id="container2">
<div id="hidden2">hidden text</div>
</div>
<div id="container3">
<div id="hidden3">hidden text</div>
</div>
When I hover one of those divs, I want to display the hidden texts. I'm using this:
$(document).ready
(
function()
{
$('#container1').hover
(
function()
{
$('#hidden1').fadeIn("slow");
},
function()
{
$('#hidden2').fadeOut("slow");
}
)
}
);
This work on a one by one base but as my number of divs is going to be dynamic, I guess there must be a way to avoid copy/pasting the javascript for every div available.
Is there a way to have one javascript that would handle all divs separately to show only the hidden text for the div in hover?
Thanks