CODEWITHSUNDEEP
javascriptjqueryhtmlcssshow-hide
user1535882
user1535882

Reputation: 119

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.

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.

Upvotes: 0

Views: 3511

Answers (3)

nickaknudson
nickaknudson

Reputation: 4807

Something like this?

http://jsfiddle.net/nickaknudson/fkqgz/

Upvotes: 0

alexvance
alexvance

Reputation: 1124

This is working fine: http://jsfiddle.net/zn55e/1/. My guess is that you're either not loading jQuery correctly or you weirded yourself out by specifying nth-child(1n) in the Javascript - if you're going for the first item, nth-child(1) is the correct parlance.

PS: close the margin-left line at div#right-column-sidebar ol li:nth-child(11){margin-left:.

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

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();
});

Upvotes: 5

Related Questions