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

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" />');