Show hide bubble div jquery click function

Question

I have one question about my script. I have created this DEMO from codepen.io

I'm trying to make a bubble pop-up clicked on the link. My onclick function is working now.

My question is, if you click my DEMO page then you see there are two image and when you hover over that image then you see black color div. So if you click this div then you see .bubble will open but if you mouse live on this div bubble will still stay open. Ok it should be stay opening but the black div automatically getting display:none => I don't want it ( How can i do this. )

Also if you click right side black color div then you see left .bubble still stay open so i want when i click other black div then i want other bubble will automatically hide .

Anyone can help me in this regard ?

This is my jquery function :

$(document).ready(function() {
          $('.nav-toggle').click(function(){
            var collapse_content_selector = $(this).attr('href');       
            var toggle_switch = $(this);
            $(collapse_content_selector).toggle(function(){
              if($(this).css('display')=='none'){
                toggle_switch.html('x');
              }else{
                toggle_switch.html('x');
              }
            });
          });
        });

Answer 1

You could just modify this piece of css :

.imgar:hover .delete, .imgar.selected .delete{
display: block;
}

Notice, I added the class selected so when you do the js event click add the class event to imgar like so :

$('.imgar').addClass('selected');

And don't forget to remove the class when he click back to the element :

$('.imgar').removeClass('selected');

EDIT

JS

$(document).ready(function() {
          $('.nav-toggle').click(function(){
            var collapse_content_selector = $(this).attr('href');       
            var toggle_switch = $(this);
            $('.imgar').removeClass('selected'); // Remove the X before openning a second
            if($(collapse_content_selector).css('display')=='none'){
              $('.bubble').hide();
            }
            $(collapse_content_selector).toggle(function(){
              if($(this).css('display')=='none'){
          toggle_switch.parent().parent().removeClass('selected');
                toggle_switch.html('x');
              }else{
          toggle_switch.parent().parent().addClass('selected');
                toggle_switch.html('x');
              }
            });
          });

        }); 

CSS

.imgar:hover .delete, .imgar.selected .delete{
    display: block;
}

Codepen http://codepen.io/SebastienBeaulieu/pen/RNPzzL