Hide and Show list on buttonclick
===

I am trying to hide and show a list from a certain point. But it is not working. I am using jquery .toggle to be able to get this effect but for some reason the list items wont budge. Really need an explanation on this and why it isnt working.
 
I have the following the code for it
    css
    
    div#right-column-sidebar{position: absolute; top: 840px; 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:}		
    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;
    }

    html
    <div id="right-column-sidebar">
    <ol>
    <li><a href="#">Title 1</a></li>
    <li><a href="#">Title 2</a></li>
    <li><a href="#">Title 3</a></li>
    <li><a href="#">Title 4</a></li>
    <li><a href="#">Title 5</a></li>
    <li><a href="#">Title 6</a></li>
    <li><a href="#">Title 7</a></li>
    <li><a href="#">Title 8</a></li>
    <li><a href="#">Title 9</a></li>
    <li><a href="#">Title 10</a></li>
    <li><a href="#">Title 11</a></li>
    <li><a href="#">Title 12</a></li>
    <li><a href="#">Title 13</a></li>
    <li><a href="#">Title 14</a></li>
    <li><a href="#">Title 15</a></li>
    <li><a href="#">Title 16</a></li>
    <li><a href="#">Title 17</a></li>
    <li><a href="#">Title 18</a></li>
    <li><a href="#">Title 19</a></li>
    <li><a href="#">Title 20</a></li>
    </ol>
    </div>
    <a class="button" href="#"><span>Show more</span></a>
   
   js
    
    <script type="text/javascript">
    $('a.button').click( function() { $('div#right-column-sidebar ol li:nth-    
    child(1n)').toggle(); } );
    </script>	

    Thats all the code and I want to hide and show the list items from a point and further down. And again I want to show them when I click again.