jQuery más/menos o expandir/contraer en una lista

Question

Cualquiera quiere intentar emular lo que la BBC ha hecho en el contenido del cuadro de su página de inicio con los íconos MÁS / MENOS que muestran/ocultan elementos en una lista. http://www.bbc.co.uk/

Intenté hacer esto pero hasta ahora el efecto no es exactamente el correcto.

¿O existe algún complemento o algo que le permita hacer algo similar?

Answer 1

Gracias por su respuesta. Yo probé esto, pero parecía un poco excesivo para lo que estaba haciendo. Además quería ejecutar el código varias veces en diferentes secciones del sitio.

Al final encontré un plugin llamado Collapsorz, https://github.com/akuzemchak/collapsorz que hace exactamente lo que quería.

Gracias por su ayuda de todos modos. Muy apreciado.

Answer 2

Esto es sólo cuestión de ocultar y eliminar elementos:

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

Por supuesto, querrás vincular eso con algo que muestre el CSS correcto por elemento cuando se carga la página.(para que pueda realizar un seguimiento de la cantidad de elementos que desea mostrar.

Incluso puedes probar esto en esta página:

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

Si estás usando Firebug, simplemente ejecuta esto y verás cómo cambia la barra de navegación:Los "botones" en la parte superior desaparecerán, uno por uno cada vez que lo ejecutes.

Probablemente puedas manejar esta parte, pero aquí está de todos modos.

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