title: How to toggle class when click outside element with Javascript?
body: <p>I'm using the <a href="https://tailwindui.com/components/application-ui/navigation/navbars" rel="nofollow noreferrer">free example navbar on tailwindui</a>. I wrote some javascript to be able to toggle the menu on mobile and toggle the profile pic tooltip. However the profile pic tooltip doesn't close on clicks outside it.</p>
  <p>My current javascript code only toggles the profile pic tooltip on and off when it's clicked. It doesn't hide the tooltip when outside it is clicked.</p>
  <p>I tried using a click event listener and toggle the tooltip off when the event listener fired but that didn't work.</p>
  <p>Using Javascript, how would you hide the profile pic tooltip on outside clicks?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  
    document.getElementById('togglemebutton').onclick = function () {
      document.getElementById("resultnav").classList.toggle("hidden");
    }
    
    //document.getElementById('togglemebutton').onclick = function () {
    //  document.getElementById("toggleme").classList.toggle("hidden");
    //}
    
    
    document.getElementById('toggleprofile').onclick = function () {
      document.getElementById("resultprofile").classList.toggle("hidden");
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"&gt;
  
  &lt;nav class="bg-gray-800"&gt;
    &lt;div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"&gt;
      &lt;div class="relative flex items-center justify-between h-16"&gt;
        &lt;div class="absolute inset-y-0 left-0 flex items-center sm:hidden"&gt;
          &lt;!-- Mobile menu button--&gt;
          &lt;button id="togglemebutton" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out" aria-label="Main menu" aria-expanded="false"&gt;
            &lt;!-- Icon when menu is closed. --&gt;
            &lt;!-- Menu open: "hidden", Menu closed: "block" --&gt;
            &lt;svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"&gt;
              &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /&gt;
            &lt;/svg&gt;
            &lt;!-- Icon when menu is open. --&gt;
            &lt;!-- Menu open: "block", Menu closed: "hidden" --&gt;
            &lt;svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"&gt;
              &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /&gt;
            &lt;/svg&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"&gt;
          &lt;div class="flex-shrink-0"&gt;
            &lt;img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-on-dark.svg" alt="Workflow logo"&gt;
            &lt;img class="hidden lg:block h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-on-dark.svg" alt="Workflow logo"&gt;
          &lt;/div&gt;
          &lt;div class="hidden sm:block sm:ml-6"&gt;
            &lt;div class="flex"&gt;
              &lt;a href="#" class="px-3 py-2 rounded-md text-sm font-medium leading-5 text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"&gt;Dashboard&lt;/a&gt;
              &lt;a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"&gt;Team&lt;/a&gt;
              &lt;a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"&gt;Projects&lt;/a&gt;
              &lt;a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"&gt;Calendar&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"&gt;
          &lt;button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out" aria-label="Notifications"&gt;
            &lt;svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"&gt;
              &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /&gt;
            &lt;/svg&gt;
          &lt;/button&gt;
  
          &lt;!-- Profile dropdown --&gt;
          &lt;div class="ml-3 relative"&gt;
            &lt;div&gt;
              &lt;button id="toggleprofile" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out" id="user-menu" aria-label="User menu" aria-haspopup="true"&gt;
                &lt;img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt=""&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;!--
              Profile dropdown panel, show/hide based on dropdown state.
  
              Entering: "transition ease-out duration-100"
                From: "transform opacity-0 scale-95"
                To: "transform opacity-100 scale-100"
              Leaving: "transition ease-in duration-75"
                From: "transform opacity-100 scale-100"
                To: "transform opacity-0 scale-95"
            --&gt;
            &lt;div id="resultprofile" class="hidden z-40 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"&gt;
              &lt;div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu"&gt;
                &lt;a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem"&gt;Your Profile&lt;/a&gt;
                &lt;a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem"&gt;Settings&lt;/a&gt;
                &lt;a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem"&gt;Sign out&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!--
      Mobile menu, toggle classes based on menu state.
  
      Menu open: "block", Menu closed: "hidden"
    --&gt;
    &lt;div id="resultnav" class="hidden sm:hidden"&gt;
      &lt;div class="px-2 pt-2 pb-3"&gt;
        &lt;a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"&gt;Dashboard&lt;/a&gt;
        &lt;a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"&gt;Team&lt;/a&gt;
        &lt;a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"&gt;Projects&lt;/a&gt;
        &lt;a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"&gt;Calendar&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>