How to do this with Hyperlinks?

Discussion in 'HTML & Website Design' started by Aitch, Apr 5, 2009.

  1. #1
    Hi Forum

    I hope I can get my question across so that it's understood, but if my Google search results are anything to go by, I won't hold my breath :(

    Basically, I'm trying to find out how I can create links that when clicked reveal some text underneath. When the link is clicked again, the text hides from view.

    Sometimes, I've seen Q&A pages use a similar function. It's my guess it has a name and knowing what I mean but not what it's called, is probably why I'm not having much luck :confused:

    Any leads or tips on how to do this are greatly appreciated :)

    Thanks in advance

    aNdii
     
    Aitch, Apr 5, 2009 IP
  2. Oxi

    Oxi Peon

    Messages:
    78
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    There are many ways to do this, the most common way is to show and hide divs using javascript. Simple apply some css classes the display attribute for hidden and none and use/or write your own script that changes the class onclick.
     
    Oxi, Apr 5, 2009 IP
  3. Aitch

    Aitch Well-Known Member

    Messages:
    113
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Hi Oxi and thanks for the response :)

    i probably should have mentioned that i'm a novice with anything relating to code and scripts :confused:

    I am familiar with opening files in DW and playing with site layout and all that, but anything relating to code and i'm still at the starting block right now.

    Still, now that i have some jargon for the SE's, i'm more likely to find some instructions.

    Thanks once again Oxi, your reponse is appreciated ;)

    aNdii
     
    Aitch, Apr 5, 2009 IP
  4. Masterful

    Masterful Well-Known Member

    Messages:
    1,653
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #4
    Like Oxi said, you need a Javascript script to expand/show and collapse/hide div elements. Just conduct a Google query with "javascript expand collapse" or "javascript show hide" and you'll come across many examples.
     
    Masterful, Apr 5, 2009 IP
  5. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #5
    ExtremeData, Apr 6, 2009 IP
  6. Aitch

    Aitch Well-Known Member

    Messages:
    113
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    103
    #6
    Thanks everyone. The few responses I've had here have been very useful :)

    After Oxi's post Masterful, I went searching as suggested, and because there's a lot of stuff out there, and, it seems, a bunch of different ways to achieve similar results, I did eventually find quite a short piece of code which appears to be working just fine.

    Of course, it I can find time to learn a bit more about scripts, this search would not have been so time consuming and overwhelming, so it's probably a good idea if I try and get to grips with at least the basics of JS for future tasks.

    I also read that some show/hide scripts are not compliant with SE's but couldn’t find any more information as to what to watch out for, so I have no idea if the show/hide script I've chosen is conforming or not :confused:

    ExtremeData, I like the style of the jquery as it tends to glide in as opposed to just appearing, but what I don't like about this one is that when it loads in IE, it shows all hidden text until the page loads, and then it hides all.

    Thanks once again one and all ;)

    aNdii
     
    Aitch, Apr 6, 2009 IP