JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="toggle_target" style="border:1px solid red;">
THIS ELEMENT CAN BE HIDDEN
</div>
<br>
<a class="btn btn-primary toggle">Click to close element</a>

JavaScript

$(document).ready(function(){
  	if( document.cookie.indexOf('element_closed=')== -1){
    	document.cookie = 'element_closed=false; path=/';
     }
  	// document.cookie = "element_closed=true"; // uncomment to test focusing window with element hidden
    // used to get an individual cookie by name
    // from http://stackoverflow.com/questions/10730362/get-cookie-by-name
    function getCookie(name) {
      var value = "; " + document.cookie;
      var parts = value.split("; " + name + "=");
      if (parts.length == 2) return parts.pop().split(";").shift();
    }

    function hideElement(){
      $(".toggle_target").hide();
      document.cookie = 'element_closed=true; path=/'
      console.log(document.cookie);
    }

    $(window).focus(function(){
      //console.log(document.cookie);
      console.log(getCookie('element_closed'));
      if(getCookie('element_closed') == 'true'){
        hideElement();
      }
    });

    $(".toggle").on('click', function(e){
      e.preventDefault();
      hideElement();
    });
  });