Read more button

[gemzilla]

Hi,

I'm trying to create a read button on a website so that I can tidy up the web page. The text will be hidden by default and if a user clicks read more then they should get the rest of the text appear. I want multiple of these buttons to appear.

I have got the core of the code, I think, but when I had more of the same button to on web page, no matter what button I press it will always show the more info of the first instance. Hope I'm making sense.

this is my Java script and HTML code:


function ReverseDisplay() {
if(document.getElementById('more').style.display == "none") { document.getElementById('more').style.display = "block"; }
else { document.getElementById('more').style.display = "none"; }
}



<div id="morebutton" onclick='ReverseDisplay();'><a>Read More</a></div>
<div id="more" style="display:none;">more info</div>

The idea is that there will be multiple instances of the HTML code and the button that the user clicks will be the text related to that button.

Thanks

[Beverleyh]

Yeh, that's not working because the script is activating the one id called "more", so if all of your hidden divs have matching ids, it's going to conflict.

This key is to use a script that allows for different ids, which will help validate your markup too (you shouldn't use the same id multiple times on a web page)

Try this script instead;

function ReverseDisplay(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}

And your HTML markup should be;
<p>This is a short intro/excerpt for entry one. <a href="javascript:void(0);" onclick="ReverseDisplay('entry-01');this.innerHTML=(this.innerHTML=='Read More')?'Read Less':'Read More';">Read More</a></p>
<div id="entry-01" style="display:none;">
<p>Entry 1 - blah, blah...</p>
<p>Entry 1 - blah, blah...</p>
<p>Entry 1 - blah, blah...</p>
</div>

<p>This is a short intro/excerpt for entry two. <a href="javascript:void(0);" onclick="ReverseDisplay('entry-02');this.innerHTML=(this.innerHTML=='Read More')?'Read Less':'Read More';">Read More</a></p>
<div id="entry-02" style="display:none;">
<p>Entry 2 - ho-hum...</p>
<p>Entry 2 - ho-hum...</p>
<p>Entry 2 - ho-hum...</p>
</div>

<p>This is a short intro/excerpt for entry three. <a href="javascript:void(0);" onclick="ReverseDisplay('entry-03');this.innerHTML=(this.innerHTML=='Read More')?'Read Less':'Read More';">Read More</a></p>
<div id="entry-03" style="display:none;">
<p>Entry 3 - do-by-do...</p>
<p>Entry 3 - do-by-do...</p>
<p>Entry 3 - do-by-do...</p>
</div>
Note the hidden div ids that need to match the corresponding "ReverseDisplay" ids in the "Read More" links.

Hope that helps

[gemzilla]

Thank you that was very useful