PDA

View Full Version : CSS/html text grow code?



lofight
Jun 22, 2008, 02:33 PM
I've just started with html/css and it's actually pretty easy.. I'm making I site for my dad with images,html and css.
I need a bit of code for html and css where there is a link "read more" and when people who visit the site press on it, more text comes..

I want it to be like the picture i've attached..


japaternoster
Jun 22, 2008, 04:31 PM
This came up pretty recently here. (http://forums.macrumors.com/showthread.php?t=485162) Have a read, any more questions, just ask.
lofight
Jun 22, 2008, 05:39 PM
This came up pretty recently here. (http://forums.macrumors.com/showthread.php?t=485162) Have a read, any more questions, just ask.

Well, when I tried the code, there came a read more after but then also all the text that I wanted to first be away and then appear.. Could you put the code so that I could have more of the read more's?
angelwatt
Jun 22, 2008, 05:54 PM
Well, when I tried the code, there came a read more after but then also all the text that I wanted to first be away and then appear.. Could you put the code so that I could have more of the read more's?

Supply each read more with a different id attribute so each link will only effect that one e.g., id="read1", id="read2", etc. This was covered at the very end of the linked discussion. Unless you mean something else.
lofight
Jun 23, 2008, 03:50 AM
Supply each read more with a different id attribute so each link will only effect that one e.g., id="read1", id="read2", etc. This was covered at the very end of the linked discussion. Unless you mean something else.

When I applied the code from that link, I just put the text that I want to be away an appear after that code? Could you show me that code but with the text before, the read more and the text after that appears..
angelwatt
Jun 23, 2008, 08:25 AM
When I applied the code from that link, I just put the text that I want to be away an appear after that code? Could you show me that code but with the text before, the read more and the text after that appears..

<p>Non-hidden text. <a href="#"
onclick="document.getElementById('read1').style.display='';
this.innerHTML=''; return false;">...Read more</a>
<span id="read1" style="display:none">Hidden text.</span>
</p>

<p>Non-hidden text 2. <a href="#"
onclick="document.getElementById('read2').style.display='';
this.innerHTML=''; return false;">...Read more</a>
<span id="read2" style="display:none">Hidden text 2.</span></p>
lofight
Jun 23, 2008, 09:06 AM
<p>Non-hidden text. <a href="#"
onclick="document.getElementById('read1').style.display='';
this.innerHTML=''; return false;">...Read more</a>
<span id="read1" style="display:none">Hidden text.</span>
</p>

<p>Non-hidden text 2. <a href="#"
onclick="document.getElementById('read2').style.display='';
this.innerHTML=''; return false;">...Read more</a>
<span id="read2" style="display:none">Hidden text 2.</span></p>

Oh, I get it. Thank you very much!