bug? on click event

[eneax]

Hello im doing a simple jquery code for let some element of my page be hide or show on click, here my code:

$(document).ready(function(){
    //hide the box at the start
    $(".infoBox p").hide();
    // open the box when click on class element "toggle"
    $(".toggle").click(function(){
        $(".infoBox p").show(function(){
            //close the box by clicking in every part of the window
            if($(this).is(':visible')) {
                $(window).click(function(){ 
                $(".infoBox p").hide();
                });
            }
        });    
    });
     
});

as you can see i want that my element is hide at start, then when i click on element with class toggle it show me the box and at the end when the box is visible, when i click everywhere in the window the box will close.

Now the first time everything goes as it should, but from the second time when i click on my element "toggle" it does not show my box, i have to do a double click (why?), the hide on window works fine every times, but i can't understand why the second time i have to double click and not a simple click for open my box.

thanks everyone.

[dsonesuk]

You have a click event within a click event that is only initiated on the parent click event and every click after that? confusing! just imagine how confusing it finds it. Try separating them, the window event should be triggered only if the target event is not equal to toggle event and the paragraph is visible.

Edited November 24, 2017 by dsonesuk

[eneax]

12 hours ago, dsonesuk said:

You have a click event within a click event that is only initiated on the parent click event and every click after that? confusing! just imagine how confusing it finds it. Try separating them, the window event should be triggered only if the target event is not equal to toggle event and the paragraph is visible.

thank you for the help, i'm new to javascript, i'm just learning in this site.

Here the code i use to fix the problem:

$(document).ready(function(){
  
    $(".infoBox p").hide();
    
    $(".toggle").click(function(){
        $(".infoBox p").toggle();  
    });
      
    $(window).click(function(e) {
      if (e.target.class != '.toggle' && $(e.target).parents('.toggle').length == 0 && $(".infoBox p").is(":visible") ) {
          $(".infoBox p").hide();
      }
    });
    
});

 

[shree420]

I would simply use .toggle() to hide or show an element. The code should be simply:

$(".infoBox p").toggle();

 

[dsonesuk]

47 minutes ago, shree420 said:

I would simply use .toggle() to hide or show an element. The code should be simply:

$(".infoBox p").toggle();

 

IF only the element itself was controling hide/show effect then yes! But when this effect is contolled also from outside the toggle() effect, it loses the ability to identify if it is visible  or hidden correctly.