title: Writing a $.cookie to show a form upon submit in a multi form page
body: <p>Writing a page with use of $.cookie to show a form upon submit in a multi form page.  I have seen similar questions go unanswered when it got to this specific code. I have read and read, seems like this should work. Yes, very new to jquery, 1 week.</p>
  
  <p>I have container divs (class) each with an p toggle to show/hide each form.  Upon submit I want the form to remain .show() so that errors or even response will be seen.  p must be clicked to .hide form; so a person could open all the forms.</p>
  
  <p>I know there are much more complicated ways to do this.  I just want to learn the simple, possibly long hand version so help me understand what is going on. I added a number of alerts for hints.  Some reason loops back to undefined.</p>
  
  <p>Sorry I am so 'green'.  I am sure this is too simple for most here.</p>
  
  <p>css:</p>
  
  <pre><code>.set {
       }
  .set form {
  display: none;
     }
  .set p {
      color: #996600;
      cursor: pointer;
      }
  .set p.hover {
  background-color: #00CCCC;
      }
  </code></pre>
  
  <p>the html:</p>
  
  <pre><code>&lt;div class="set"&gt;&lt;p&gt;Click&lt;/p&gt;
  &lt;form id="form1"&gt;
  
   &lt;div id="here" style="text-align:center; border:1px solid black; width:60px;"&gt;form 1&lt;/div&gt;
     &lt;button id="form1button" class="button"&gt;BUTTON form1&lt;/button&gt;
  
  &lt;/form&gt;
  &lt;/div&gt;
  
  
  &lt;div class="set"&gt;&lt;p&gt;Click2&lt;/p&gt;
  &lt;form id="form2" &gt;
  
  &lt;div id="here" style="text-align:center; border:1px solid black;  width:60px;"&gt;Click&lt;/div&gt;
      &lt;button id="form2button" class="button"&gt;BUTTON form2&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  
  &lt;div class="set"&gt;&lt;p&gt;Click3&lt;/p&gt;
      &lt;form id="form3" &gt;
  
  &lt;div id="here" style="text-align:center; border:1px solid black;  width:60px;"&gt;Click&lt;/div&gt;
  &lt;button id="form3button" class="button"&gt;BUTTON form3&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the jquery:</p>
  
  <pre><code>if($.cookie('toogle')=== undefined) {
  $('.set form#form1').show();
  alert('undefined');
  
  
  if ($.cookie('toogle') == 'form1') {
      $('.set form#form1').show();
      $('.set form#form2').hide();
      $('.set form#form3').hide();
  } else if ($.cookie('toogle') == 'form2') {
      $('.set form#form2').show();
      $('.set form#form1').hide();
      $('.set form#form3').hide();
  } else if ($.cookie('toogle') == 'form3') {
      $('.set form#form3').show();
      $('.set form#form1').hide();
      $('.set form#form2').hide();
  } else {
      $('.set form#form1').show();
      $('.set form#form2').hide();
      $('.set form#form3').hide();    
  };
  
  alert($.cookie('toggle'));
  
      $('#form1button').on('click', function() {
  
          $.cookie('toggle', 'form1');
              alert('form1 button!!!');
      });
  
      $('#form2button').on('click', function() {
  
          $.cookie('toggle', 'form2');
              alert('form2 button!!!');
      });
  
      $('#form3button').on('click', function() {
  
          $.cookie('toggle', 'form3');
              alert('form3 button!!!');
      }); 
  
  $('.set p').click(function() {
  
      $(this).toggleClass('active').next().slideToggle('slow');
  
      });
  </code></pre>