Map not opening without refreshing page once closed

Question

The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again It is running jquery - here is the code

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
                $(document).ready(function(){

                    $('#view_map_of_stocklists_link').click(function() {

                        //$('#popupdiv').show('slow');
                        $("#popupdiv").css('visibility', 'visible');
                        $("#mappy").css('opacity', '1');



                    });

                    $('.closepopup').click(function() {

                        $('#popupdiv').hide('slow');

                    });


                });
            </script>

The styling

<style>
                #popupdiv 
                    {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        background-color: white;
                        z-index: 100;
                        height: 600px;
                        margin-top: -200px;
                        width: 960px;
                        margin-left: -500px;
                        padding: 20px;
                    }

                    #view_map_of_stocklists_link:hover {
                        cursor:pointer;
                    }

                    .closepopup {
                        margin-top: 60px;
                        border: 1px solid #ccc;
                        background-color: #000;
                        color: white;
                        cursor: pointer;
                    }

            </style>

and then the HTML itself

<div id="popupdiv" style="visibility:hidden;">
                            <center>
                                <iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
                                <div class="closepopup" style="width:200px">Close</div>
                            </center>
                        </div>

                        <h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
                        <h5 class="skin-font-color1 p-wrapper"><!-- client txt -->  <div id="view_map_of_stocklists_link" class="skin-font-color4">
                          <h4>View map of   stockists</h4>
                    </div>

The website is http://www.tee-ze.co.uk/sosmoothies/

Cheers

Answer 1

You are setting 'visibility' to 'visible' instead of 'display' to 'block'. When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:

$('#view_map_of_stocklists_link').click(function() {
  $('#popupdiv').hide('slow');
});

Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.

Edit: Sorry for complaining in may previous answer.

I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.

Answer 2

The way you're showing the popup map doesn't match the way you're hiding it.

You show it with:

$("#popupdiv").css('visibility', 'visible');

But you hide it with:

$('#popupdiv').hide('slow');

That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.

When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.

You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).

For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.