Just a quickie...
$(document).ready(function() {
numVisible=4;
itemHeight=$("#myList li").height();
$("#myList").css({height:numVisible*itemHeight,overflow:"hidden"});
});
In IE, this loses the bullet points, but it's a start and maybe someone
else has a solution for that.
Liam
mofle wrote:
Hi.
I have an unordered list like this one:
<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>
I want to only show the 5 first items, and hide the rest.
I have a link to toggle the hidden elements on and off:
<a href="#" id="myList-toggle">Show the rest</a>
I use the slideToggle(400) to slide the rest of the list in.
Anyone?
This is what I have now, it just toggles the whole list.
<script type="text/javascript">
$(document).ready(function() {
$('#myList').hide();
$('a#myList-toggle').click(function() {
$('#myList').slideToggle(400);
return false;
});
});
</script>
------------------------------------------------------------------------
No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.0.233 / Virus Database: 270.10.20/1943 - Release Date: 02/10/09 07:20:00
