OK, this is what I have.
Multiple lists that I can collapse and expand.
What I want is for them to only show x amount of items until I expand
them.
Say x = 2
In Section A the following would be shown
Link A-A
Link A-B
In Section B the following would be shown
Link B-A
Link B-B
etc.
And when I push a Section link it will show all
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu > li > a[class=expanded] +
ul").slideToggle("medium");
$("#menu > li > a").click(function() {
$(this).toggleClass("expanded").toggleClass("collapsed").find("+
ul").slideToggle("medium");
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a class="expanded">Section A</a>
<ul>
<li><a href="#">Link A-A</a></li>
<li><a href="#">Link A-B</a></li>
<li><a href="#">Link A-C</a></li>
<li><a href="#">Link A-D</a></li>
</ul>
</li>
<li><a class="expanded">Section B</a>
<ul>
<li><a href="#">Link B-A</a></li>
<li><a href="#">Link B-B</a></li>
<li><a href="#">Link B-C</a></li>
<li><a href="#">Link B-D</a></li>
</ul>
</li>
<li><a class="expanded">Section C</a>
<ul>
<li><a href="#">Link C-A</a></li>
<li><a href="#">Link C-B</a></li>
<li><a href="#">Link C-C</a></li>
<li><a href="#">Link C-D</a></li>
</ul>
</li>
</ul>
</body>
</html>
