title: Load posts in div with slideUp/slideDown using jQuery
body: <p>I'm trying to load content from wordpress pages into a div on a custom template using links.</p>
  
  <p>I have one div that is hidden, and should be displayed with slideDown when content is loaded into it.</p>
  
  <p>I have several links to different pages that I want to be loaded into this one div by onClick, or something similar.</p>
  
  <blockquote>
    <p>Example:<br><br>
    Lets say I have the following links:
    <br> - Link 1 (home)
    <br> - Link 2 (about)
    <br> - Link 3 (contact)</p>
  </blockquote>
  
  <p>If a visitor clicks these links something like this should happen:</p>
  
  <blockquote>
    <p>Click link 2 --> load into div --> div gets displayed with slideDown
    or similar.</p>
    
    <p>Click link 3 --> previous loaded content fades out and content of link
    2 fades in</p>
    
    <p>Click link 2 (again) --> similar action as by click og link 2...</p>
    
    <p>Click link 1 --> clears div and hides it by slideUp or similar.</p>
    
    <p>If Link 2 or 3 is active, and the user clicks the same link again -->
    similar action as by click of Link 1</p>
  </blockquote>
  
  <p>I have found some bits of code to help me on the way, but I'm not quite there yet. <br>
  Heres what I have so far:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
        $('#navigationMenu a').click(function() { // When a menu item is selected
              $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
              return false; // And prevent it following the link
        });
  });
  
  function toggleSlider() {
      if ($("#maincontent").is(":visible")) {
          $("#sec-content").animate(
              {
                  opacity: "0"
              },
              600,
              function(){
                  $("#maincontent").slideUp();
              }
          );
      }
      else {
          $("#maincontent").slideDown(600, function(){
              $("#sec-content").animate(
                  {
                      opacity: "1"
                  },
                  600
              );
          });
      }   
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have found this code in related posts here on SO, and this makes me load the content into the div with slideUp/slide/down functionality.<br>
  BUT it closes the div by click on link 3 (in the example), so I'll have to click the link again to load it once more.<br>
  And the home link, Link 1, doesn't do what I want yet.</p>
  
  <p>Hope someone with a little more knowledge about this can help me out here.<br>
  Is it at all possible to do?</p>
  
  <p>Thanks!</p>
  
  <p>---- Edited code 02/08/13 ----</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(function() {
        $('#navigationMenu a').click(function() { // When a menu item is selected
              $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
              return false; // And prevent it following the link
        });
  });
  
  var lastData;
  $(function () {
      $("a").click(function(event) {
          loadData($(this).attr("href"));
          event.preventDefault();
      });
  });
  
  function loadData(data) {
      if(lastData == data) {
          $("#maincontent").slideUp();
      } else {
          $("#maincontent").html(data);
          $("#maincontent").slideDown();
      }
      lastData = data;
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The result can be seen at <a href="http://tobba.org/no" rel="nofollow">http://tobba.org/no</a></p>