Hiding/showing text

Discussion in 'Web Design and Development' started by Macnoviz, Jun 19, 2007.

  1. Macnoviz macrumors 65816

    Macnoviz

    Joined:
    Jan 10, 2006
    Location:
    Roeselare, Belgium
    #1
    I can't seem to find a solution for this rather simple problem: I have a homepage with recent updates, but they are starting to grow to rather long page, and since I want people to occasionally look at the footer as well, I want to hide all entries except the latest.
    Is there a method to show and hide text, withouth having to use 2 pages? It's all very low-tech (manual entries and such) but I think this shouldn't be so hard.
    The end result should be something like the descriptions in YouTube (pressing (more) reveals the entire description withouth reloading anything)

    The code for that showed something like hideInline, but I couldn't find this in the dreamweaver help files.

    P.S. Yes, I am new in web development:eek:
     
  2. JStell macrumors newbie

    Joined:
    Feb 13, 2007
    #2
    Assuming your not using a language that allows for dynamic content since you said it's "lowtech" you could just comment out the text in the HTML page. Comments are ignored by the browser but remain in the document.

    HTML:
    <!-- Insert text to be commented -->
     
  3. Macnoviz thread starter macrumors 65816

    Macnoviz

    Joined:
    Jan 10, 2006
    Location:
    Roeselare, Belgium
    #3
    by lowtech I do indeed mean HTML+CSS (and javascript)

    but I would like the users to be able to see the extra content, just not right away.
     
  4. JStell macrumors newbie

    Joined:
    Feb 13, 2007
    #4
    You'll have to do some Java to show and hide things. I understand what you are trying to do, I've done it before but it was doing ASP.net websites.
     
  5. angelneo macrumors 68000

    Joined:
    Jun 13, 2004
    Location:
    afk
    #5
    Is it something like this?

    Code:
    <script language="javascript">
    function hideshow(layername) {
        if (document.getElementById(layername).style.display=="")
            document.getElementById(layername).style.display = "none";
        else
            document.getElementById(layername).style.display = "";
    }
    </script>
    <div onClick="hideshow('hiddentext1')">Click on this text to hide/show layer 1</div>
    <div id="hiddentext1">Layer 1 <br /> Blah Blah Blah so on and so forth</div>
    <br />
    <div><a href="javascript:hideshow('hiddentext2')">Click on this text to hide/show layer 2</a></div>
    <div id="hiddentext2">Layer 2 <br /> Blah Blah Blah so on and so forth</div>
    
    
    Cut and paste into a new html file to test
     
  6. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #6
    You'll need JavaScript, not Java, and it's pretty simple....

    In the CSS, set the elements display attribute to none to make it hidden by default.

    Code:
    #someId { display: none; }
    Then use JavaScript to show the text:
    Code:
    document.getElementById("someId").style.display = "block";
    (if it's an inline element, use "inline" instead of block"

    To re-hide the text:
    Code:
    document.getElementById("someId").style.display = "none";
    Hope that helps.
     

Share This Page