Hi, I'm trying to create a collapsible list, that only shows the first
5 items, and hides the rest. If click the link it will slide in the
rest of the list items, and if I click the link again it will hide the
expanded list items.
How can I do that? and is there a better way to do this?
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var list = $('ul#myList');
var original_height = list.height();
list.css({height:$('#myList li').height()*5});
$('a#myList-toggle').click(function() {
list.animate({height:original_height})
return false;
});
});
</script>
<style type="text/css">
ul#myList {
overflow: hidden;
}
</style>
</head>
<body>
<a href="#" id="myList-toggle">Show the rest</a>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</body>
</html>
