CODEWITHSUNDEEP
javascriptjqueryclick
StudioTime
StudioTime

Reputation: 23989

Simple click show() does nothing

I might be losing my mind here:

<span class="showMap" style="cursor:pointer;">(Show map)</span>

<div class="col-md-12">
    <div id="map" style="height:300px; display:none;"></div>
</div>

As you can see, DIV #map is set to not display, on clicking DIV .showMap I want it to show:

$( ".showMap" ).click(function() {
    alert('hey'); // for testing -> works perfectly 
    $('#map').show();
});

But it does nothing. No errors, nothing in console.

The hidden DIV contains a google map, not sure if that makes any difference but thought I'd mention it.

Upvotes: 1

Views: 82

Answers (3)

Snowburnt
Snowburnt

Reputation: 6922

works for me: http://jsfiddle.net/snowburnt/q392B/

put something in the div, then you'll see it open.

<div class="col-md-12">
    <div id="map" style="height:300px;display:none;background-color:green">hello</div>
</div>

it doesn't look like there is anything there, because the background is white and there's nothing in the DIV. (also, as answered above, google maps doesn't like not being displayed). So your code is working, just not displaying anything.

Upvotes: 1

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14882

Google Maps does not like being hidden when it is being loaded. Think of jquery's height() function - it will return a wrong value when the element is hidden.

I'm not sure this will work, but using CSS have you #map as position:absolute;left:-9999em; so that it appears off-screen. This might allow Google Maps to load correctly. On the click function you will then want to hide() the map element, change the css to position:relative;left:0; and then show() it.

jQuery(function($){
  var map = $('#map');
  map.css({position:'absolute',left:'-9999em'});
  $('.showMore').click(function(){
    map.hide().css({position:'relative',left:'0em'}).show();
  });
});

Upvotes: 3

Vishal Patel
Vishal Patel

Reputation: 973

Try this... JsFiddle

 $(document).ready(function(){
      $( ".showMap" ).click(function() {
        alert('hey'); // for testing -> works perfectly 
        $('#map').css('display','');
    });    
});

Upvotes: -1

Related Questions