title: vertical slider push and slide content on click jquery plugin
body: <p>Does anyone know of a jQuery plugin to slide content up and down on click and push content up or down? If user clicks #nav-1, slide up #slide-1 (pushing #slide-2 and/or 3 down), if user clicks #nav-2, slide up or down #slide-2 (depend on if 3 or 1 is active), and if user clicks #nav3, slide up #slide-3. I couldn't find one that would work with my application.... Thanks</p>
  
  <pre><code>            &lt;div id="vertical-slider" class="vertical-slider clearfix"&gt;
                  &lt;div class="slider-nav"&gt;
                      &lt;a href="#" class="slide-1"&gt;
                          &lt;span id="nav-1" &gt;&lt;/span&gt;
                          &lt;span id="nav-2" class="active"&gt;&lt;/span&gt;
                          &lt;span id="nav-3"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="slides"&gt;
                      &lt;div id="slide-1" class="slide "&gt;
                          &lt;h2&gt;Hi, I'm sdf.&lt;/h2&gt;
                          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis, massa vitae ultricies consectetur, tellus erat bibendum felis, vel rhoncus est metus nec mauris. Aliquam id iaculis erat.&lt;/p&gt;
                          &lt;p&gt;Phasellus facilisis, turpis feugiat vehicula cursus, mi augue interdum enim, in tincidunt nulla velit vel diam. Nam hendrerit lobortis dolor sit amet imperdiet. Morbi leo risus, lobortis fringilla tempor ut, venenatis vel ipsum. &lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div id="slide-2" class="slide active"&gt;
                          &lt;h2&gt;This is the slide heading&lt;/h2&gt;
                          &lt;ul&gt;
                              &lt;li&gt;This is a list item&lt;/li&gt;
                              &lt;li&gt;This is a list item&lt;/li&gt;
                          &lt;/ul&gt;
                          Sample link that &lt;a href="#" title=""&gt;goes nowehere&lt;/a&gt;.
                      &lt;/div&gt;
  
                      &lt;div id="slide-3" class="slide"&gt;
                          &lt;h2&gt;Get in Touch!&lt;/h2&gt;
  
                          &lt;div class="connect-icons clearfix"&gt;
                              &lt;div class="row email"&gt;
                                  &lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;jdoe@asdf&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="row linkedin"&gt;
                                  &lt;span&gt;&lt;/span&gt;Connect via &lt;a href="#" title="LinkedIn"&gt;LinkedIn&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="row phone"&gt;
                                  &lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;(877) 302-2393&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="row vcard"&gt;
                                  &lt;span&gt;&lt;/span&gt;Download &lt;a href="#"&gt;vCard&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="row fax"&gt;
                                  &lt;span&gt;&lt;/span&gt;(877) 302-2300
                              &lt;/div&gt;
                              &lt;div class="row pdf"&gt;
                                  &lt;span&gt;&lt;/span&gt;Download &lt;a href="#"&gt;Bio (pdf)&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="row twitter"&gt;
                                  &lt;span&gt;&lt;/span&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>