fidgeting.net

So, you’ve got all these great Javascript effects on your website. Hidden information magically appears after clicking a link, and all is good. But what if someone that doesn’t have Javascript comes to your site? If your information is being initially hidden by CSS, you’re doing it all wrong.

Instead, the best way is to have everything visible by default in your CSS file and use Javascript to “unhide” it. To illustrate this concept, I’m going to go through a quick example utilizing the excellent jQuery.

First, let’s create a simple <div> that we want to have hidden at first. There will also be a link to “unhide” it.

<a href="" id="the-link">Show DIV</a>
<div id="the-text">
    <p>This is a simple paragraph inside the div</p>
    <p>And another, just for kicks.</p>
</div>

Now the typical way to have the DIV initially hidden would be to place #the-text { display: none; } in your stylesheet. However, I want it to display even if the user doesn’t have Javascript. So, I’m not going to use CSS at all. Instead, I’m going to do the following in my .js file (using jQuery, naturally):

$(document).ready( function() {
    $("#the-text").css("display", "none");
});

So what just happened? Once the document was “ready” I set the display attribute of #the-text to none, but instead of using CSS, I used Javascript.

Alright, we’ve successfully hidden the DIV. But wait, what if they don’t have JS? Sure, the DIV will be visible, but so will the link, which is completely useless if the information is already shown! How about a way to hide that? Remove the link from your HTML and add the following to your .js file:

$(document).ready( function() {
    $("#the-text").before("<a href=\"\" id=\"the-link\">Show DIV</a>");
});

Once again, the code’s pretty easy to understand (isn’t jQuery great?). I’m simply adding <a href=\"\" id=\"the-link\">Show DIV</a> before #the-text in my document.

Time for a recap of what we’ve done so far: for someone without Javascript, the document shows up with the DIV visible and without a link. For a visitor with Javascript, however, the document instantly hides the DIV and adds the link. Now to add the effect:

$(document).ready( function() {
    $("#the-link").toggle( function() {
        $("#the-text").slideDown("slow");
        $("#the-link").html("Hide DIV");
        return false;
    }, function() {
        $("#the-text").slideUp("slow");
        $("#the-link").html("Show DIV");
        return false;
    });
});

This code may be a little more confusing. What I’m doing is assigning two functions to the toggle action of #the-link (”Show DIV”). Whenever the link is clicked, it will switch from one state to the other. In the first state, #the-text is exposed using the slideDown() method, and #the-link changes its text to say “Show DIV.” In the second state, just the opposite occurs.

Time to put it all together. First the HTML:

<div id="the-text">

    <p>This is a simple paragraph inside the div</p>

    <p>And another, just for kicks.</p>

</div>

Now the Javascript, with a few events chained thanks to jQuery:

$(document).ready( function() {

    $("#the-text").css("display", "none")

        .before("<a href=\"\" id=\"the-link\">Show DIV</a>");

    $("#the-link").toggle( function() {

        $("#the-text").slideDown("slow");

        $("#the-link").html("Hide DIV");

        return false;

    }, function() {

        $("#the-text").slideUp("slow");

        $("#the-link").html("Show DIV");

        return false;

    });

});

And there you go! For an example of this, check out my (very ugly) example page.