title: using Nav link (list) to slide right or left menu-content div into the container div?
body: <p>edit:
  question : how to use .slide() properly for multiple divs.</p>
  
  <p>My page consists of a Nav bar (in one div) followed by another div that is a container, 
  in this container div i have 5 other divs (marked with an id of col-2  through col-6 that hold the content.   </p>
  
  <p>I want to have these col-2 through col-6 divs slide into view when the corresponding link in the nav bar is clicked. Don't want code that does it for me just asking on how to do it, examples, links to other JSfiddles with something similar (sliding divs to the center of another div) </p>
  
  <p>not looking for fadeOut or fadeIn code, or code that slide down from the link clicked.</p>
  
  <p>When the link is clicked i want the corresponding content div to slide in from either the left or right side, and when another link is clicked the current div slides out and the new div sildes in.  (pretty straight forward) just need directions or even what goes to what in the code writing, 
  i don't need someone to take time and do the work for me, just need help figuring out what to do... </p>
  
  <p>do i need jquery UI linked up? and whats the correct way for linking it cause i can't get the UI link from goodle to work on my page. </p>
  
  <p>the fiddle i've attached is just an idea of the code im working with. id much prefer links to other sources that show how to properly use .slide() especially with multiple divs </p>
  
  <pre><code>  &lt;div class="nav-bar"&gt;
      &lt;ul&gt;
  
        &lt;li&gt;&lt;a class="nav1" id="col-2" href="#col-2"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  
        &lt;li&gt;&lt;a class="nav1" ide="col-3" href="#col-3"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
  
        &lt;li&gt;&lt;a class="nav1" id="col-4" href="#col-4"&gt;PUBLISHED&lt;/a&gt;&lt;/li&gt;
  
        &lt;li&gt;&lt;a class="nav1" id="col-5" href="#col-5"&gt;PROJECTS&lt;/a&gt;&lt;/li&gt;
  
        &lt;li&gt;&lt;a class="nav1" id="col-6" href="#col-6"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="menu-content col2" id="col2"&gt;
        &lt;h1&gt;Author of "wall of tears" series&lt;/h1&gt;
        &lt;p&gt; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
          Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
          tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
          porttitor, facilisis luctus, metus&lt;/p&gt;
  
      &lt;/div&gt;
      &lt;!-- end col2--&gt;
  
  
  
  
      &lt;div class="menu-content col3" id="col3"&gt;
        &lt;img class="bio" src="_imgs/walloftears.jpg" /&gt;
      &lt;/div&gt;
      &lt;!-- end  col3--&gt;
  
      &lt;div class="menu-content col4" id="col4"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
      &lt;/div&gt;
      &lt;!-- end  col4--&gt;
  
  
      &lt;div class="menu-content col5" id="col5"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
      &lt;/div&gt;
      &lt;!-- end  col5--&gt;
  
  
      &lt;div class="menu-content col6" id="col6"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
      &lt;/div&gt;
      &lt;!-- end  col6--&gt;
  
    &lt;/div&gt;
    &lt;!-- end container--&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/Pinky_M/rp8gudhr/4/" rel="nofollow noreferrer">https://jsfiddle.net/Pinky_M/rp8gudhr/4/</a></p>
  
  <p>Creating a webpage for a friend, question is and i've searched and experimented as much as I can. Im new to javascript/jquery i can read it (once all code is written) but i have trouble writing it myself. 
  would like when one of the links in the nav is clicked the corresponding menu-content div slides in from either the right or left into the container div, when the next linked is clicked remove the previous div by sliding it out as the new one slides in (or the new one slides in just after the other one slides out.   I've found countless tutorials and other projects that use this technique but i for the life of me cannot get it to work. Getting frustrated with it now.  I'm still on simple code writing for JavaScript, although i'm a bit better with jQuery and would prefer to use that.  </p>
  
  <p>link to the fiddle i made with all the HTML and CSS I'm using, jQuery is linked up although jQuery UI isn't as it seems to not like linking for me.    thank you in advance for any help</p>