CSS/html text grow code?

Discussion in 'Web Design and Development' started by lofight, Jun 22, 2008.

  1. lofight macrumors 68000

    lofight

    Joined:
    Jun 16, 2007
    #1
    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..
     

    Attached Files:

  2. japaternoster macrumors newbie

    Joined:
    Nov 20, 2007
    #2
    This came up pretty recently here. Have a read, any more questions, just ask.
     
  3. lofight thread starter macrumors 68000

    lofight

    Joined:
    Jun 16, 2007
    #3
    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?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. lofight thread starter macrumors 68000

    lofight

    Joined:
    Jun 16, 2007
    #5
    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..
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    HTML:
    <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>
     
  7. lofight thread starter macrumors 68000

    lofight

    Joined:
    Jun 16, 2007
    #7
    Oh, I get it. Thank you very much!
     

Share This Page