Как сделать следующий скрипт?

Question

[msatmb]

есть список ul состоящий из большого количества пунктов li. Как сделать так, чтобы всегда в списке ul с классом ul-collapse выводилось только 3 пункта списка, а остальные скрывались под кнопку "Развернуть"? При нажатии на кнопку разворачивался полный список. И еще чтобы это выглядело как на картинке (с размытием 3 списка)

Comments

[Kovalsky]

То есть вы попытались это реализовать и у вас не получилось, да? С каким сложностями столкнулись?

[msatmb]

Никита Полевой: ну как сказать пытался :) Пытался. получилось как-то так

<ul class="ul-collapse">
<li>Демонтаж старого унитаза - 1</li>
<li>Выравнивание пола - 1</li>
<li>Монтаж новой манжеты на трубу канализации - 1</li>
<li>Установка нового унитаза - 1</li>
<li>Подключение к стояку при помощи гибкой подводки - 1</li>
<li>Подключение к стояку при помощи гибкой подводки - 1</li>
<li>Подключение к стояку при помощи гибкой подводки - 1</li>
<li>Подключение к стояку при помощи гибкой подводки - 1</li>
<li>Подключение к стояку при помощи гибкой подводки - 1</li>
<li>Подключение к стояку при помощи гибкой подводки - 1</li>
<li>Подключение к стояку при помощи гибкой подводки - 1</li>
</ul>
<a id="hideShow" class="btn btn-default">Развернуть</a>

и скрипт

var isHidden = true;
                $('#hideShow').click(function(event) {
                    var buttonText = 'Свернуть';
                    if (isHidden) {
                        $('.ul-collapse').animate({height: '250px'}, 1000);
                        isHidden = false;
                    }
                    else {
                        $('.ul-collapse').animate({height: '65px'}, 1000);
                        isHidden = true;
                        var buttonText = 'Развернуть';
                    }
                    $(event.currentTarget).html(buttonText);
                });

Но это не совсем то, и нет полупрозрачности :)

Answer 1

[Stalker_RED]

Набросал пример, но пришлось захардкодить высоту меню, иначе анимация не срабатывала.
А переписывать лень.

Upd: у вас же jQuery, можете использовать его .toggle() для разворачивания, и необходимость в transition отпадет.