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');
              }
            });
          });
        });

You can use if ($('#yourID:visible').length == 1){} condition so that you don't toggle black color div. follow this answer for more detail : http://stackoverflow.com/a/15924774/3190165, if you want I can create an example for you. — Gaurav Kalyan, Nov 28 '14 at 18:16

Sebastien B. · Accepted Answer · 2014-11-28T19:04:44.080

0

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

edited Nov 28 '14 at 19:04

answered Nov 28 '14 at 18:18

Sebastien B.

476
3
10

thanks for your answer but can you give me a little example ? from [jsfiddle](http://www.jsfidle.net) or [codepen](http://www.codepen.io) – Nov 28 '14 at 18:23
See the Edit, I only put the changed css, and you have all the js code needed. – Sebastien B. Nov 28 '14 at 18:28
i understood that but the selected `.bubble` not remove when i click other `.imgar` – Nov 28 '14 at 18:32
Also I updated the code in the post so ppl can see the bubble solution direct on this site you only had to add those 2 line `$('.imgar').removeClass('selected'); $('.bubble').hide();` before the toggle to be sure to close element. – Sebastien B. Nov 28 '14 at 18:43
if i click second time on black color then what can i do for hide bubble ? – Nov 28 '14 at 18:54
1

Oh my bad lol I forgot a condition I have editted the CodePen I will eddit this to. – Sebastien B. Nov 28 '14 at 19:04
Np, I'm glad I could helped you. – Sebastien B. Nov 28 '14 at 19:07

Show hide bubble div jquery click function

1 Answers1