jQuery mais / menos ou expandir / recolher em uma lista

Question

Qualquer um quer ter uma rachadura em emular o que a BBC tem feito em sua homepage conteúdo em caixas com os ícones MAIS / MENOS mostrando / ocultando elementos de uma lista. http://www.bbc.co.uk/

Eu tentei fazer isso, mas até agora o efeito não é exatamente correto.

Ou, existe um plugin ou algo que lhe permitiria fazer uma coisa semelhante?

Answer 1

Obrigado pela sua resposta. Eu tentei isso, mas parecia um pouco exagerado para o que eu estava fazendo. Além disso, eu queria executar o código algumas vezes em diferentes seções do site.

No final, eu encontrei um plugin chamado Collapsorz, https://github.com/akuzemchak/collapsorz, que faz exatamente o que eu queria.

Obrigado por sua ajuda de qualquer maneira. Muito apreciada.

Answer 2

Esta é apenas uma questão de esconder e elementos remoção:

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

Claro, você vai querer amarrar isso em algo que põe para fora o CSS direita por item quando a página é carregada. (Assim você iria manter o controle do número de itens que você deseja exibir.

Você pode até tentar fazer isso nessa página:

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

Se você estiver usando o Firebug, basta executar este, e você vai ver a mudança barra de navegação:. Os "botões" no topo vai desaparecer, um por um para cada vez que você executá-lo

Você pode provavelmente lidar com essa parte, mas aqui é assim mesmo.

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