jQuery плюс/минус или развернуть/свернуть список

Question

Любой хочет попробовать подражать тому, что BBC сделала на своей домашней странице с коробочным содержимым с помощью значков ПЛЮС/МИНУС, показывающих/скрывающих элементы в списке. http://www.bbc.co.uk/

Я пытался это сделать, но пока эффект не совсем тот.

Или есть ли плагин или что-то еще, что позволило бы вам сделать подобное?

Answer 1

Спасибо за ваш ответ.Я попробовал это, но это показалось мне немного излишним для того, что я делал.Плюс мне хотелось выполнить код несколько раз на разных разделах сайта.

В конце концов я нашел плагин Collapsorz. https://github.com/akuzemchak/collapsorz который делает именно то, что я хотел.

В любом случае спасибо за вашу помощь.Очень признателен.

Answer 2

Это всего лишь вопрос сокрытия и удаления элементов:

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

Конечно, вы захотите связать это с чем-то, что выдает правильный CSS для каждого элемента при загрузке страницы.(чтобы вы могли отслеживать количество элементов, которые хотите отобразить.

Вы даже можете попробовать это на этой странице:

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

Если вы используете Firebug, просто запустите это, и вы увидите изменение панели навигации:«Кнопки» вверху исчезнут одна за другой при каждом запуске.

Вероятно, вы справитесь с этой частью, но все равно вот.

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