title: Sliding divs right to left using jQuery
body: <p>I am making a website in which I have multiple pages. I want them not be a different webpage but to be a different div on the same page. Then I have two left and right buttons on which it, when a user clicks a particular div, should slide left or right according to the arrow. How can I do this with jQuery, HTML, CSS?</p>
  
  <p>My Divs:
  </p>
  
  <pre><code>&lt;div id="main-page"&gt;    
  &lt;/div&gt;
  &lt;div id="about-us"&gt;
  &lt;/div&gt;
  &lt;div id="contact-us"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The Divs have a particular background-image, and their size is full-screen.</p>
  
  <p>My script:</p>
  
  
  
  <pre><code>$("#main-page").click(function() {
      $("#main-page").hide("slide", {direction: "left"}, 1000);
      $("#about-us").show("slide", {direction: "right"}, 1000);
  });
  </code></pre>
  
  <p>As I said, I don't want to do like that. I want arrows to check what div has the turn to slide left or right.</p>