Make a hidden div visible when javascript disabled

Question

I currently have a div in my HTML that is initially hidden (using display:none).

<div class="fulladdress">
   <p>Only display the contents of this div when an element is clicked!</p>
</div>

I then use the following Javascript so when the .autocompleteitem item is clicked, it displays:

$(document).ready(function() {

    $(document).on('click','.autocompleteitem:not(.autocompleteitemwithcontainer)',function(){
        $("div.fulladdress").show();
    });
});

However, if Javascript is disabled, the full address will never display. How do I resolve this?

You can make things to be hidden/shown via CSS properties instead. — SimpleBeat, Apr 17 '17 at 09:15
**Check for this post** [Link for stack overflow post](http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled) — santhosh, Apr 17 '17 at 09:17
Someone briefly posted a link about using jQuery's `hide` and I've now adjusted my code to use this instead. Makes perfect sense :) — michaelmcgurk, Apr 17 '17 at 09:20
You can directly use $(".fulladdress").show(); instead of using DIV with it. — Saurabh Mehta, Apr 17 '17 at 09:24

score 3 · Answer 1 · answered Apr 17 '17 at 09:16

3

Maybe try working with the tag <noscript>. It runs the code inside it if the javascript is disabled.

answered Apr 17 '17 at 09:16

jeyejow

419
1
5
15

I had considered this, but will it display if I already have the `.fulladdress` hidden with CSS? – michaelmcgurk Apr 17 '17 at 09:17
Not sure but i think you can show the div with the `document.` and then the option to show, or you can just create the div inside the ` – jeyejow Apr 17 '17 at 09:26

score 2 · Answer 2 · answered Apr 17 '17 at 09:21

Use following HTML code. Now user can see the div when javaScript disabled by user or device not support javaScript. You can customize your div by select .fulladdress class on CSS.

 <noscript>
     <div class="fulladdress">
        <p>Only display the contents of this div when an element is clicked!
        </p>
     </div>
</noscript>

score 0 · Accepted Answer · answered Apr 17 '17 at 09:24

0

You can try something like this.

If javascript enabled - Hide div on document ready and then show on click event

If javascript disabled your document ready function wont execute and it wont hide the div

$(document).ready(function() {
    $("div.fulladdress").hide();
    $("#button").on('click',function(){
        $("div.fulladdress").show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fulladdress">
   <p>Only display the contents of this div when an element is clicked!</p>
</div>
<div class="button">
   <button id="button">display</button>
</div>

answered Apr 17 '17 at 09:24

Dhiraj

1,430
11
21

I understand that the `div` is hidden via CSS, and jQuery is only used to show it. So the actual question is how to show a `div` hidden by CSS (`display: none`) without using JavaScript. I also understand, that it's not quite acceptable to show the hidden `div` if JavaScript is disabled. It's still better be hidden and then shown (but not with JavaScript). – SimpleBeat Apr 17 '17 at 09:26
In such cases this is the trick. Make css property to show div and if javascript is enabled then in document ready function hide it or change css property to display :none. hence if javascript is disabled it will display the div – Dhiraj Apr 17 '17 at 09:34
True, and it would be ok, if the default (as far as I understand the question) allows for the `div` to be visible if JavaScript is disabled. However, the author still wants it to be hidden, even if JavaScript is disabled, and toggled if the user clicks the `div`. There are ways to do it without JavaScript I believe. – SimpleBeat Apr 17 '17 at 09:38
Yup i agree that i have suggested answer which is not a exact answer but how would you detect click event if javascript is disabled? Either he has to display the error page if javascript is disabled if he is using javascript functionality. – Dhiraj Apr 17 '17 at 09:45
There are pseudo classes in CSS which might suit the needs. For example, if the user hovers over the `div` it would display the `.fulladdress`, and it can be achieved with `:hover` pseudo class in CSS. The click can be registered in CSS by using checkbox pseudo class properties (which is somewhat of a hack, but does work), etc. – SimpleBeat Apr 17 '17 at 09:49
I know about the pseudo classes but if you can acheive it for click event then please submit a answer. I would like to learn this. As per my knowledge it would not work. – Dhiraj Apr 17 '17 at 09:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141868/discussion-between-simplebeat-and-dhiraj). – SimpleBeat Apr 17 '17 at 10:08

score 0 · Answer 4 · answered Apr 17 '17 at 09:32

0

Try this

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.
    </div>
</noscript>

answered Apr 17 '17 at 09:32

Nazeeb Alookaran

97
2

score 0 · Answer 5 · edited May 23 '17 at 11:54

If you absolutely have to have your div hidden at first even with JavaScript disabled and only then revealed, then there are some ways to deal with it.

You can detect if JavaScript is disabled and request the user to enable it, and not show the page unless the user does so. How to detect if JavaScript is disabled?
You can use CSS properties to show/hide .fulladdress on hover instead of on a click (you might want to modify your div for that, or put it inside a <noscript> tag).
You might want to use 'hacks' to detect a click without using JavaScript. Here are a few examples:
Show / hide div on click with CSS
What is the simplest way to implement pure css show/hide?

Hope this helps!

Make a hidden div visible when javascript disabled

5 Answers5