jQuery più / meno o di espansione / compressione in un elenco

Question

Chiunque vuole avere una crepa al emulare ciò che la BBC hanno fatto sulla homepage del loro contenuto in scatola con le icone PIÙ / MENO mostrando / elementi in una lista che nasconde. http://www.bbc.co.uk/

Ho provato a fare questo, ma finora l'effetto non è esattamente a destra.

In alternativa, c'è un plugin o qualcosa che ti permettono di fare una cosa simile?

Answer 1

Grazie per la risposta. Ho provato questo, ma sembrava un po 'eccessivo per quello che stavo facendo. Inoltre ho voluto eseguire il codice un paio di volte su diverse sezioni del sito.

Alla fine ho trovato un plugin chiamato Collapsorz, https://github.com/akuzemchak/collapsorz che fa esattamente quello che volevo.

Grazie per il vostro aiuto in ogni modo. Molto apprezzato.

Answer 2

Questa è solo una questione di nascondere e la rimozione di elementi:

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

Naturalmente, si vorrà legame che con qualcosa che mette fuori il diritto CSS per articolo quando la pagina viene caricata. (Così si sarebbe tenere traccia del numero di elementi che si desidera visualizzare.

Si può anche provare questo fuori in questa pagina:

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

Se stai usando Firebug, basta eseguire questo, e vedrete il cambiamento barra di navigazione:. I "pulsanti" nella parte superiore spariranno, uno ad uno per ogni volta che si esegue

Probabilmente si può gestire questa parte, ma qui è in ogni caso.

<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>";
?>