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
– SimpleBeat, Commented Apr 17, 2017 at 9:15
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
– michaelmcgurk, Commented Apr 17, 2017 at 9:20
You can directly use $(".fulladdress").show(); instead of using DIV with it. — Saurabh Mehta
– Saurabh Mehta, Commented Apr 17, 2017 at 9:24

jeyejow · Accepted Answer · 2017-04-17 09:16:05Z

3

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

answered Apr 17, 2017 at 9:16

jeyejow

4291 gold badge5 silver badges17 bronze badges

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

2 Comments

michaelmcgurk Over a year ago

I had considered this, but will it display if I already have the .fulladdress hidden with CSS?

jeyejow Over a year ago

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 <noscript> , but i dont think you want that

Niladri · Accepted Answer · 2017-04-17 09:21:33Z

2

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>

answered Apr 17, 2017 at 9:21

Niladri

1891 silver badge5 bronze badges

Comments

Dhiraj · Accepted Answer · 2017-04-17 09:24:02Z

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, 2017 at 9:24

Dhiraj

1,48212 silver badges21 bronze badges

7 Comments

SimpleBeat Over a year ago

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).

Dhiraj Over a year ago

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

SimpleBeat Over a year ago

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.

Dhiraj Over a year ago

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.

SimpleBeat Over a year ago

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.

|

Nazeeb Alookaran · Accepted Answer · 2017-04-17 09:32:23Z

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, 2017 at 9:32

Nazeeb Alookaran

972 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:54:27Z

0

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!

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 17, 2017 at 10:07

SimpleBeat

7511 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Make a hidden div visible when javascript disabled

5 Answers 5

2 Comments

Comments

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related