title: Jquery Slide DIV half of page only
body: <p>I try To make Something Like that which present at Microsoft's Support Website.See -> (<a href="http://support.microsoft.com/" rel="nofollow noreferrer">Visit Here</a>)</p>
  
  <p>Click on any Product which list there. <strong>(Note: Purpose of this article/Question is not MARKETING on any Product!!!  It just for Knowledge.)</strong></p>
  
  <p><img src="https://i.stack.imgur.com/UjhtX.png" alt="enter image description here"></p>
  
  <p>When You click on any one of listed there, one drop-down appear.</p>
  
  <p><img src="https://i.stack.imgur.com/6dluc.png" alt="enter image description here"></p>
  
  <p>Now Here Points of my question are comes out. After click on menu item you can see that there is one "Select a topic" list and when you click on any one of them, 2nd list comes out. and after click on item from 2nd list 3rd one list comes out. I exactly try to make a script like that. I search over internet and make a one div slider. But it slide whole div.
  Here is my code what I done</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="gallery"&gt;
    &lt;div id="slider"&gt;
       &lt;div style="background:#cf5"&gt;1&lt;/div&gt;
       &lt;div style="background:#ada"&gt;2&lt;/div&gt;
       &lt;div style="background:#b0b"&gt;3&lt;/div&gt;
    &lt;/div&gt;
    &lt;span id="prev"&gt;Prev&lt;/span&gt;
    &lt;span id="next"&gt;Next&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#gallery{
    position:relative;
    margin: 0 auto;
    overflow:hidden;
    width:500px;
    height:330px; /* +30 = space for buttons */
    text-align:center; /* to center the buttons */
  }
  #slider{
    position:absolute;
    left:0;
    height:300px;  
    text-align:left; /* to reset text inside slides */
  }
  #slider &gt; div {
    position:relative;
    float:left;
    width:500px;
    height:300px;
  }
  #prev, #next{
    display:inline-block;
    position:relative;
    top:300px;
    cursor:pointer;
    padding:5px;
  }
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$(function(){
  
      var $gal = $('#gallery'),
      $sli = $('#slider'),
      $box = $('div',$sli),
      W    = $gal.width(), // 500
      N    = $box.length,  // 3
      C    = 0;            // a counter
  
      $sli.width(W*N);
  
      $('#prev, #next').click(function(){
      C = (this.id=='next' ? ++C : --C) &lt;0 ? N-1 : C%N;
      $sli.stop().animate({left: -C*W },800);
      }); 
  
  });
  </code></pre>
  
  <p>And Here Is Example of Of my code on <strong><a href="http://jsfiddle.net/tutorialdrive/SRdq4/" rel="nofollow noreferrer">Fiddle</a></strong> </p>