Hide element after clicking anywhere

Design help Animations & Interactions
10

Hi :slight_smile: It’s a project for a client, so I can’t share a link with you.
This is what it looks like:

Head code:

.globe-wrapper, .arrow-wrapper, .language-text, .arrow  {
	pointer-events: none;
}

and for footer code:

const triggerFooter = document.querySelector('.language-footer');
const triggerNav = document.querySelector('.chose-language');
const whiteDivNav = document.querySelector('.lauguage-dropdown-balloon');
		const whiteDivFooter = document.querySelector('.lauguage-dropdown-balloon-footer');

    document.addEventListener('click', event => {
      let currentPlace = event.target.classList[0];
      if (currentPlace === 'chose-language') {
      	whiteDivNav.classList.toggle('block');
        whiteDivFooter.classList.remove('block');
      } else if (currentPlace === 'language-footer') {
      	whiteDivFooter.classList.toggle('block');
        whiteDivNav.classList.remove('block');
      } else if (currentPlace === 'lauguage-dropdown-balloon-footer' || currentPlace === 'lauguage-dropdown-balloon') {
      	return 1;
      } else {
      	whiteDivFooter.classList.remove('block');
        whiteDivNav.classList.remove('block');
      };
      
    });
</script>
1 Like