title: move button down on collapse expand
body: <p>So I have the code to make my list drop down and back up. Now I want the button to go along with it both ways. I managed to get it down, but back up not so good. I was trying to add the button in a common div with the list, but it did not work because the button disappeared after clicked on time. So I really want to make it as stylistic as possible, it would be great to add a slowmotion effect and loading effect if possible.</p>
  
  <p>here is the code again </p>
  
  <p>Html</p>
  
  <pre><code>&lt;div id="right-column-sidebar"&gt;
      &lt;ol&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 5&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 6&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 7&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 8&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 9&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 10&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 11&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 12&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 13&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 14&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 15&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 16&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 17&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 18&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 19&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Title 20&lt;/a&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div#right-column-sidebar{
      position: absolute; 
      right: -140px;
  }
  
  div#right-column-sidebar ol{
      position:absolute; 
      right: 150px;
      margin: 10px 0 10px 10px;
      font-size: 20px;
      color: red;
      list-style-type:none
  }
  
  div#right-column-sidebar ol li {
      list-style-type:none;
      margin: 10px 0 10px 0; 
      border-bottom: 1px dotted grey; 
      width: 200px; display: block;
  }
  
  div#right-column-sidebar ol li a{
      font-size: 60%; color: blue;margin-left: 20px
  }
  div#right-column-sidebar ol li:nth-child(11){
      margin-left:0;
  }      
  div#right-column-sidebar ol li a:hover{
      text-decoration: underline;
  }
  
  a.button {
      border: 1px solid lightgrey;no-repeat scroll top right;
      color: #444;
      display: block;
      float: left;
      font: normal 12px arial, sans-serif;
      height: 24px;
      margin-right: 6px;
      padding-right: 18px; /* sliding doors padding */
      text-decoration: none;
  }
  
  a.button span {
      display: block;
      line-height: 14px;
      padding: 5px 0 5px 18px;
  }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$(function(){
      $('div#right-column-sidebar ol li:gt(9)').hide();
      $('a.button').click( function() { 
          $('div#right-column-sidebar ol li:gt(9)').toggle(); 
          $('a.button').addClass('change-height');
      });
  });
  </code></pre>