javascript - How to ensure div doesn't close once it is opened unless the page is refreshed?

Question

I'm building a map with dots. When you click each dot, it opens up a <div> with a form related to that dot.

Once you click the dot and the <div> opens, when you click a different dot it closes that <div> and the new form related to the recently clicked dot opens in <div>.

How can I have the <div> open once and never close unless the page is refreshed?

Here is the code

<script type="text/javascript">

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".dot").show();

    $('.dot').click(function(){
        $(".slidingDiv").slideToggle("slow");
    });

});

</script>

<script>
jQuery(function(){
         $('#showSingle').click(function(){
               $('.targetDiv').show();
        });
        $('.dot').click(function(){
              $('.targetDiv').hide();
              $('#div'+$(this).attr('target')).show();
        });
});
</script>

Answer 1

When you first select a dot, the information appears. But when you select a different dot (or even the same one), the information box closes. This is because you are using .slideToggle(). You want to use slideDown() and slideUp(), because slideToggle will toggle it show/hidden depending on its current state.

I'm assuming if the user selects the already opened dot, you want to hide the information. The following code takes care of that by using hasClass() to determine if the selected dot also has the class of selected.

$('.dot').click(function(){
   //$(".slidingDiv").slideToggle("slow");
   if ($(this).hasClass("selected") {
       $(".slidingDiv").slideUp('slow');
   }
   else {
       $(".slidingDiv").slideDown('slow');
   }
});

-Read more about jQuery effects

Answer 2

You can specify a separate class for dots that will open a div but will not close a target div, then just use that new class when assigning a click handler:

$('.dot2').click(function(){
    $('#div'+$(this).attr('target')).show();
});