How to show hidden div when javascript is disabled?

Question

I'm hiding a div using display:none and this div only shows when we click on + icon. but if JavaScript is disabled then I want to show that div by default on. How to do this?

I can't post whole code for now.

jQuery(document).ready(function() {
  jQuery('a#toggle').click(function() {
       jQuery('#map').slideToggle(400);
       return false;

});

CSS

#map {display:none}

possible duplicate of how to check if javascript is disabled? — Jørn Schou-Rode
– Jørn Schou-Rode, Commented May 27, 2010 at 23:02

deceze · Accepted Answer · 2010-05-27 06:49:15Z

14

Only hide it if Javascript is enabled:

<head>
    <script type="text/javascript" charset="utf-8">
        document.write('<style type="text/css" media="screen">#map { display: none; }</style>');
    </script>
</head>

edited May 27, 2010 at 6:49

answered May 27, 2010 at 6:36

deceze♦

525k89 gold badges807 silver badges954 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Strelok Over a year ago

I feel this is a better solution to the above 2, because the others will cause your page to flicker once it's loaded and all the divs are hidden with jQuery, if JS is enabled. I would suggest just including a different stylesheet in <noscript></noscript> tags that just overrides the default display:none; with display:block;

deceze Over a year ago

@strelok The problem being that <noscript> can't be used in the <head> (AFAIK).

Strelok Over a year ago

You are correct. But yeah, either way, your solution is much better than using javascript to actually hide all the divs on page load.

Jitendra Vyas Over a year ago

working now I just added `document.write('<style type="text/css" media="screen">#map { display: none; }</style>'); ' at top of my external javascript

Erich Kitzmueller · Accepted Answer · 2010-05-27 07:13:43Z

3

You could use a noscript tag:

<noscript>
<style type="text/css" media="screen">#map { display: block !important; }</style>
</noscript>

answered May 27, 2010 at 7:13

Erich Kitzmueller

37.1k5 gold badges85 silver badges104 bronze badges

Comments

prostynick · Accepted Answer · 2010-05-27 06:36:23Z

2

While rendering on server don't set display:none to that div. During page load on client set display:none using JavaScript.

answered May 27, 2010 at 6:36

prostynick

6,2195 gold badges42 silver badges61 bronze badges

Comments

Starx · Accepted Answer · 2010-05-27 07:47:01Z

2

I think

<noscript>Your browser does not support JavaScript!</noscript>

This would be a better idea that other

Put the division you want to show if the javascript is not enable inside <noscript> tags

answered May 27, 2010 at 7:47

Starx

79.3k50 gold badges187 silver badges266 bronze badges

1 Comment

Starx Over a year ago

If the javascript is disabled in the client, your external js will not work anyway

Collectives™ on Stack Overflow

How to show hidden div when javascript is disabled?

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related