Button Popup disappearing

I’ve got a button on Header1. The button pops up a piece of HTML code that is hidden by default. I then want anywhere clicked outside of the HTML on the Header 1 to then hide the HTML.

I have an event that triggers on click for the button when booking state = 0, I set the booking state to 1.
I have an event that triggers on click for the header 1 when booking state = 1, I set the booking state to 0
Even though the mouse was only clicked once. It seems like both of these events are firing.

var booking = 0;

$w.onReady(function () {
	// Write your code here

});

export function button502_click(event) {
	if (booking == 0){
		$w('#html2').show();
		booking = 1;
	}
}

export function header1_click(event) {
	if (booking == 1){
		$w('#html2').hide();
		booking = 0;
	} 
}

Check what is the exact case.

  1. Clicking onto BUTTON → no doubled triggering?
  2. Clicking onto HEADER → firing both events?

Well, if so, then it is plausible, isn’t it? Because when clicking onto the button → means also clicking into the header, because button is on header?

Not tested, but could be the case.

So maybe you need a further if-else-condition.