Question

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.

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>

JavaScript:

$('a.button').click( function() { 
    $('div#right-column-sidebar ol li:nth-child(1n)').toggle(); 
});

That’s 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.

Answer 1

Try this – http://jsfiddle.net/9HXzW/1/

$('div#right-column-sidebar ol li:gt(4)').hide();
$('a.button').on("click", function() {
    $('div#right-column-sidebar ol li:gt(4)').slideToggle();
});