Dealing with expandable jQuery content if javascript disabled

Question

I have a messaging tool within the website I am currently working on. The idea is to have a header div and a details div (display="none") for each message.

Ideally, if javascript enabled, I have just the header showing and when the user clicks on it, the details div slide open.

This is fine but how should I work it if javascript is disabled? I was thinking of expanding all messages if disabled, but I don't want a flicker briefly when the page loads of all images open and, if javascript enabled, they collapse.

I'm using ASP.NET and was thinking of checking javascript status of the browser server side but i found out that it can't be done cleanly.

Any suggestions on how to achieve this?

Answer 1

You are right the server can only tell you if the browser has JavaScript, it has no clue if it is enabled or not.

Things you can try is do not use onready or onload, just put the lines at the bottom of your JavaScript to hide the content. You might even want to place it directly after the elements on the page.

<div id="foo">
    asdf
</div>
<script type="text/javascript">
    jQuery("#foo").css("display","none");
</script>

One side note, sounds like you should be using a definition list instead of two divs. Would make probably more sense to a person using a screen reader.

Answer 2

I believe you're looking for the <noscript> tag.

You could achieve the result you describe in one of several ways, but here's a fairly straightforward one. Define your default style for the divs to be the following:

<style type="text/css">
     div.details
     {
         display: none;
     }
</style>

And after this style tag, use a noscript block to override the default (JavaScript enabled) style, as such:

<noscript>
<style type="text/css">
     div.details
     {
         display: block;
     }
</style>
</noscript>

Answer 3

One option is to place this in your head (after the defined styles):

<noscript>
<style type="text/css">
#mydivid {display: block;}
</style>
</noscript>

EDIT: Ive actually posted a better answer, which works off a correct default state.

Answer 4

Actually, the most semantically correct way that you could do this is to append another stylesheet to the head via javascript containing styles that will be implemented if javascript is enabled.

In your example, you will retain the default display for the elements in question.

Then you will create an additional stylesheet (js-enabled-styles.css for example), and place your display:none within that.

Then, in a script tag in your head you will append an additional stylesheet. Using jquery this would be:

$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />');