JQuery plus/minus or expand/collapse on a list


Anyone want to have a crack at emulating what the BBC have done on their homepage boxed contents with the PLUS / MINUS icons showing/hiding elements in a list. http://www.bbc.co.uk/

I've tried to do this but so far the effect isn't exactly right.

Or, is there a plugin or something which would allow you to do a similar thing?

Best Solution

This is just a matter of hiding and removing elements:

<a href="javascript:void(0)" click="$('#somelist li:visible:last').hide()">+</a>
<a href="javascript:void(0)" click="$('#somelist li:hidden:first').show()">-</a>

Of course, you'll want to tie that in with something which puts out the right CSS per item when the page is loaded. (so you would keep track of the number of items you want to display.

You can even try this out on this page:

$('.nav li:visible:last').hide()

If you're using firebug, just run this, and you'll see the nav bar change: The "buttons" at the top will disappear, one by one for each time you run it.

You can probably handle this part but here it is anyway.

  .hideme {
$num_of_items = 5;
$items = array('one', 'two', 'three', 'four', 'five', 'six', 'seven');
echo "<ul id='somelist'>";
for($i=0;$i<sizeof($items);$i++) {
  echo "<li".(($i<$num_of_items)?"":" class='hideme'").">".$items[$i]."</li>";
echo "</ul>";