title: jQuery show/hide div toggling, remembering previous choices
body: <p>I am making a dynamic page that holds 3 different div's (might increase, but 3 for now). They are hidden at first, but when a link is clicked the div chosen will appear. I got this working, but now the problem I am having is that I don't really know how to get started on making it remember what div is open, then close the open one and open the newly picked one.</p>
  
  <p>So basically to give an idea of what I want to happen:</p>
  
  <ul>
  <li>Click a link to open a div1</li>
  <li>Div1 opens and gets displayed</li>
  <li>Click the link to open div2</li>
  <li>Div1 closes, and div2 will display</li>
  <li>Click div1 link again</li>
  <li>Div2 will close, and div1 will open</li>
  <li>Click div1 link yet again</li>
  <li>Div 1 will close</li>
  </ul>
  
  <p>What I got so far is the opening/closing, but I don't know how to do the "remembering" part pretty much, since I'm not that experienced with jQuery. Inside the code you will see the link is linked to "#", I'm also wondering how to make the page "flow" to the div selected (which is lower on the page).</p>
  
  <p>I posted my code on the following pastebin link:
  <a href="http://pastebin.com/psftzriY" rel="nofollow">http://pastebin.com/psftzriY</a></p>
  
  <p>Thanks ahead!</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function() {
          $('#div1toggle').click(function() {
                  $('.div1').slideToggle("slow");
          });
      });
      $(document).ready(function() {
          $('#div2toggle').click(function() {
                  $('.div2').slideToggle("slow");
          });
      });
      $(document).ready(function() {
          $('#div3toggle').click(function() {
                  $('.div3').slideToggle("slow");
          });
      });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;a href="#" id="div1toggle"&gt;Click here DIV1&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" id="div2toggle"&gt;Click here DIV2&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" id="div3toggle"&gt;Click here DIV3&lt;/a&gt;&lt;br&gt;
  
  &lt;div class="div1" style="display:none;"&gt;
     &lt;h1&gt;Div1&lt;/h1&gt;
     &lt;p&gt;Text&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="div2" style="display:none;"&gt;
     &lt;h1&gt;Div2&lt;/h1&gt;
     &lt;p&gt;Text&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="div3" style="display:none;"&gt;
     &lt;h1&gt;Div3&lt;/h1&gt;
     &lt;p&gt;Text&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>