title: javascript to swap content on page
body: <p>here is the jsfiddle of what im trying to accomplish.. 
  <a href="http://jsfiddle.net/#&amp;togetherjs=08LnngLQ1M" rel="nofollow">http://jsfiddle.net/#&amp;togetherjs=08LnngLQ1M</a></p>
  
  <p>im trying to make the content in an html file swap in and out. The java script file is set up to apply the slide function to my div. Please show me what I need to add to the javascript in order to allow the information to swap in and out as well as display appropriately. </p>
  
  <p>first my javascript file then under is the index.html file. also displayed the css in the head in order to show how i am trying to hide the content. </p>
  
  <p>please show me how to implement the javascript i am lacking and then make appropriate changes to my html and css if necessary.</p>
  
  <blockquote>
  <pre><code>$(document).ready(function() {
  
    var hash = window.location.hash.substr(1);
    var href = $('#navigationMenu li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });
  
    $('#navigationMenu li a').click(function(){
  
        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
  
  
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
  
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
  
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;
  
  
  
    });
  
  });
  
  
  
  
  
      &lt;style type="text/css"&gt;
      #page1, #page2, #page3, #page4, #page5 {
        display: none;
        overflow:hidden;
      }
      &lt;/style&gt;
  
  
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;div id="top"&gt;
      &lt;/div&gt;
  
  
      &lt;!-- The navigation css is in styles.css --&gt;
  
      &lt;div id="main"&gt;
  
      &lt;ul id="navigationMenu"&gt;
          &lt;li&gt;
            &lt;a class="home" href="#home"&gt;
                  &lt;span&gt;Home&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
            &lt;a class="about" href="#about"&gt;
                  &lt;span&gt;About&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
             &lt;a class="services" href="#services"&gt;
                  &lt;span&gt;Services&lt;/span&gt;
               &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
            &lt;a class="portfolio" href="#portfolio"&gt;
                  &lt;span&gt;Portfolio&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
            &lt;a class="contact" href="#contact"&gt;
                  &lt;span&gt;Contact us&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;/div&gt;
  
  
      &lt;!-- The css for the main area is in css.css--&gt;
      &lt;!-- The wrapper and the content div control the jquery slide up effect --&gt;
      &lt;div id="wrapper"&gt;
        &lt;div id="content"&gt;
  
          &lt;!-- The 5 pages content divs will display in this area --&gt;           
  
        &lt;/div&gt;
      &lt;/div&gt; 
  
      &lt;!-- The actual content I want to switch in and out of the panel, this is hidden --&gt;
       &lt;div id="page1" class="pages"&gt;
       &lt;p&gt;1 Whole bunch of text 1&lt;/div&gt;
  
       &lt;div id="page2" class="pages"&gt;
       &lt;p&gt;2 Whole bunch of text 2&lt;/div&gt;
  
       &lt;div id="page3" class="pages"&gt;
       &lt;p&gt;3 Whole bunch of text 3&lt;/div&gt;
  
       &lt;div id="page4" class="pages"&gt;
       &lt;p&gt;4 Whole bunch of text 4&lt;/div&gt;
  
       &lt;div id="page5" class="pages"&gt;
       &lt;p&gt;5 Whole bunch of text 5&lt;/div&gt;
  </code></pre>
  </blockquote>