jQuery plus/minus or expand/collapse on a list

Question

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?

Answer 1

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.

<style>
  .hideme {
    display:none;
  }
</style>
<?php
$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>";
?>

Answer 2

Hey altCognito,

Thanks for your reply. I did try this but it seemed a little overkill for what I was doing. Plus I wanted to execute the code a few times on different sections of the site.

In the end I found a plugin called Collapsorz, http://jquery.kuzemchak.net/collapsorz.php which does exactly what I wanted.

Thanks for your help anyway. Much appreciated.