Hello,
I am attempting to write a JS function (using prototype in rails) that will show hidden divs within a li when that li is mouseover'ed. Each li has a unique id that is a number, like so:
<li id="100">
<div style="display:none;" id="hover-display-content">Content</div>
<div style="display:none;" id="more-hover-display-content">Content</div>
<div style="display:none;" id="even-more-hover-display-content">Content</div>
</li>
I'm not sure how to go about doing this though, especially where the JS only shows the hidden elemenst for that specific li.
I'm thinking something like:
Event.observe(window, 'load', function() {
Event.observe($("li"), 'mouseover', function() {
var id = readAttribute("id")
id.getElementById("hover-display-content").style.display = "inline";
id.getElementById("more-hover-display-content").style.display = "inline";
id.getElementById("even-hover-display-content").style.display = "inline";
});
Event.observe($("li"), 'mouseout', function() {
var id = readAttribute("id")
id.getElementById("hover-display-content").style.display = "none";
id.getElementById("more-hover-display-content").style.display = "none";
id.getElementById("even-hover-display-content").style.display = "none";
});
});
But it doesn't seem to be working. Where am I going wrong?
Edit:
I am now using:
Event.observe(window, 'load', function() {
$$('li').invoke('observe', 'mouseover', function(event) {
this.children[0].toggle();
});
$$('li').invoke('observe', 'mouseout', function(event) {
document.children[0].toggle();
});
});
Which is partially working, however my code looks like the following:
<ul>
<li>
<div style="display:hidden;">Hidden Div</div>
<div>More content that isn't hidden</div>
</li>
</ul>
When I rollover the li it displays the hidden div, however if I rollover the second div it hides the comment again, even though this div is in the li. Why?