Jquery - How to Show a Hidden Div

I have a google map embedded in my page whose visiblity is set to hidden. Using a button i want to show the map on the page. Should be done using jquery.

my code - (not working)

<div id="map" style="height: 350px; border: 1px solid #979797;visibility="hidden";></div>

Anyone can help me with the related jquery codes?

2

4 Answers

Try

$('#map').css('visibility','visible');

Actually, if style has display:none, you can use jquery function

$('#map').show();
4

Your style="" tag is also incorrect. You should have this: visibility: hidden;

Try this:

<div id="map" style="height: 350px; border: 1px solid #979797; display: none";></div>

$("#map").show();

Here is a jsfiddle:

$('div#map').css('visibility', 'visible')

But visibility:hidden is better than display:none if you want to use jQuery to hide it. Because jQuery's .show() function overlays some of the page elements like anchor tags, preventing click events.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Marcus Vance

Marcus Vance

Cybersecurity & Digital Privacy Researcher

Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.

Share this article
Twitter Facebook Pinterest