Grow your CSS skills. Land your dream job.

Replacing text by clicking a button

  • # October 21, 2012 at 11:26 pm

    Hi
    Here’s the page in question: http://cargocollective.com/amytdatta/Amyt-Datta
    At the bottom of the page is the block of text in question. What i’d like to do is have an easter egg link which when clicked hides all the text which is false leaving only the truth. Any advice?
    I’m sorry if this is painfully simple! I’m a complete n00b.
    Thanks,
    Jiver

    # October 21, 2012 at 11:55 pm

    @thejive I would add a class to the text that is false and use jQuery to hide it with a click function of the bold text.

    # October 22, 2012 at 12:00 am

    Digs disco

    `Was born in the 70s`

    Grew up in a vicious part of town

    Reads mathematics textbooks to relax

    Begins the day with a hundred push-ups

    Was attacked by cockroaches after shooting a lizard

    `Is a vegetarian`

    `Was born in the 60s`

    Didn’t use a computer until 2012

    Is a completely self-taught musician

    Often sleeps with his guitar next to him

    Has played on a freezing stage lit by a single naked bulb`

    `Only some of the above is true.`

    JQuery:

    $(‘.showtrue’).click(function() {
    $(‘.false’).hide();
    });​

    # October 22, 2012 at 12:24 am

    Wow thanks so much! I really appreciate it.
    BTW, there seems to be some problem with the forums on my browser (Safari 5) I can only see the last comment (Christopher Burton’s). The rest of the entry is a gray blank. Or is this a browser settings issue?

    # October 22, 2012 at 12:25 am

    @thejive See here: http://jsfiddle.net/gVU9A/

    # October 22, 2012 at 12:45 am

    @thejive I see the code messed up. Here is the new jQuery code that should stop the redirecting.

    http://jsfiddle.net/xAQDE/

    # October 22, 2012 at 12:54 am

    Thanks so much! Any idea why I can only see the last comment in this thread (and indeed every thread on the forum)?

    # October 22, 2012 at 12:55 am

    @thejive Probably a browser issue. I’ll notify @chriscoyier about this.

    # October 22, 2012 at 12:59 am

    Cheers! Also, is there a way to script this so that the false statements merely become the background colour, or get a strikethrough, etc rather than collapsing completely? I’d like to keep the overall structure of my text the same rather than it becoming a smaller block.

    # October 22, 2012 at 1:01 am

    @thejive Sure. Just tell me what exactly you want it to look like.

    # October 22, 2012 at 1:03 am

    Well let’s just say I want the false text to turn white.

    # October 22, 2012 at 1:05 am

    @thejive Try this:

    $(“.showtrue”).click(function() {
    $(‘.false’).css(‘color’, ‘white’)
    return false;
    });​

    # October 22, 2012 at 1:09 am

    Very sick, man! Thank you.

    # October 22, 2012 at 1:13 am

    My pleasure. If you need further help, I’ll be around later or someone else might answer your questions. It’s 1am here and I’m off to bed.

    # October 22, 2012 at 1:28 am

    @thejive All right. Let’s try this one more time.

    Only some of the above is true.

    Remember you need to wrap the text that is false with some sort of markup.

    This is a false statement

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".