The
id
attribute is supposed to be unique across the entire document. You are creating multiple elements with the same ID (
hideimg
and
divItem
). When you pass that ID to
getElementById
, only the first matching element will be returned.
Fixing the image is simple - you can do this with CSS, with no script required.
Fixing the
hideTitle
function will require navigating the DOM from the passed-in element to the grandparent
<div>
element. You could use jQuery for this, or the raw javascript solution from
this StackOverflow answer[
^].
<style>
<![CDATA[
.rss-feed
{
background: #fff;
padding: 0;
font-size:10px;
}
a.rss-title > img
{
visibility: hidden;
}
a.rss-title:hover > img
{
visibility: visible;
}
]]>
</style>
<script defer="defer">
<![CDATA[
function closest(elem, selector) {
var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector;
while (elem) {
if (matchesSelector.bind(elem)(selector)) {
return elem;
}
elem = elem.parentElement;
}
return false;
}
function hideTitle(x) {
var item = closest(x, ".rss-item");
if (item) { item.style.display = "none"; }
}
]]>
</script>
<div class="rss-feed">
<xsl:for-each select="channel/item">
<div class="rss-item">
<a href="{link}" target="_new" class="rss-title">
<xsl:value-of select="title" />
<img src = "../photogallery/hide1.png" onclick="hideTitle(this);return false;" />
</a>
<br />
<xsl:value-of disable-output-escaping="yes" select="description"/>
<br />
</div>
</xsl:for-each>
</div>