title: How to show DIV on first visit and not any visit after until browser is closed
body: <p>I have the following script which slides in/slide out a DIV from the right:</p>
  
  <pre><code>// jQuery 1.9 &gt; Toggle Event dep 1.8
  $('#slideClick').click(function () {
      var it = $(this).data('it') || 1;
      switch (it) {
          case 1:
              $(this).parent().animate({ right: '-290px' }, { queue: false, duration: 500 });
              $("#imgArrow").attr("src", "../theImages/arrow_expand.png");
              break;
          case 2:
              $(this).parent().animate({ right: '-0px' }, { queue: false, duration: 500 });
              $("#imgArrow").attr("src", "../theImages/arrow_collapse.png");
              break;
      }
      it++;
      if (it &gt; 2) it = 1;
      $(this).data('it', it);
  });
  </code></pre>
  
  <p>The HTML code in the MasterPage which corresponds to the above script is:</p>
  
  <pre><code>&lt;div id="slideOut" class="clearfix"&gt;
      &lt;div id="slideContent"&gt;
          &lt;div style="width: 98%; margin: 0 auto; padding: 5px;"&gt;
              &lt;div id="dvImpMsgs" style="padding-left: 10px; padding-right: 10px;"&gt;
                  &lt;asp:UpdatePanel runat="server" ID="upMessage" ClientIDMode="Static" UpdateMode="Conditional"&gt;
                      &lt;ContentTemplate&gt;
                          &lt;asp:Label ID="lblMessage" Font-Size="x-small" runat="server" Text="" ClientIDMode="Static"&gt;&lt;/asp:Label&gt;
                      &lt;/ContentTemplate&gt;
                  &lt;/asp:UpdatePanel&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="slideClick"&gt;
          &lt;div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center;"&gt;
              &lt;div class="arrowMsg"&gt;
                  &lt;img src="../theImages/arrow_collapse.png" id="imgArrow" style="width: 12px; height: 18px; border: 0; vertical-align: middle;" /&gt;
              &lt;/div&gt;
              &lt;div style="width: 80px; height: 50px; float: right; margin: 0; padding: 0;"&gt;
                  &lt;div style="width: 80px; height: 30px; text-align: center; line-height: 30px; vertical-align: middle;" class="brClear"&gt;
                      &lt;img src="../theImages/iMsg.png" style="width: 30px; height: 30px; border: 0" /&gt;
                  &lt;/div&gt;
                  &lt;div style="color: #FFFFFF; width: 80px; height: 20px; text-align: center; line-height: 20px; vertical-align: middle; font-size: 10px;" class="brClear"&gt;
                      MESSAGES
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Everytime a user visits the page the slide-out is true which forces the user to click the <code>slideclick</code> DIV to close it, which can get a unfriendly to the user.</p>
  
  <p>How can I use a cookie or session so the following can happen:</p>
  
  <p>The first time a user visits show the DIV in slide-out position, once they click the <code>slideclick</code> DIV to hide. It will continue to remain hidden from the user until the browser is closed, in which case once the user re-opens the browser again, the DIV should be in slide-out position until the user click the <code>slideclick</code> DIV to hide, and so forth.</p>
  
  <p>slide-out position:</p>
  
  <p><img src="https://i.stack.imgur.com/NWpXY.png" alt="enter image description here"></p>
  
  <p>hide position:</p>
  
  <p><img src="https://i.stack.imgur.com/4ats9.png" alt="enter image description here"></p>