CSS/html text grow code?

[lofight]

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]

This came up pretty recently here. Have a read, any more questions, just ask.

 

[lofight]

This came up pretty recently here. 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]

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]

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]

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]

<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!