Ищу красивое решение expand collapse для блока

OliverGreen

OliverGreen

Постоялец
Регистрация
19 Сен 2008
Сообщения
123
Реакции
18
Всем привет!
Ищу вариант решения задачи скрытия некоторого количества лишнего текста.
По сути надо чтобы только часть текста должна быть видимой всегда, а остальная по клику.
Видел реализацию таким образом, что низ видимой части снизу затонирован градиентом, по клику текст расширяется.
Все что нахожу немного не то. Либо текст скрывается весь, либо выглядит как в 2007.
Подскажите где найти подобное решение.
 
Мне больше всего нравится как Для просмотра ссылки Войди или Зарегистрируйся (в самом низу страницы). Текст к низу слегка прозрачный и ссылка "Читать полностью".
238c9b28b24e403b9ada3c5e818f50bc.png
 
да, это то!
но, блин, что-то я не смог выковырять это )))
 
OliverGreen написал(а):
да, это то!
но, блин, что-то я не смог выковырять это )))
Нажмите для раскрытия...


Код: 
<div class="wrap">
            <div id="short_text" class="text-description-content box-hide"><div style="text-align: justify;">Благодаря таким качествам, как мобильность и компактность, <strong>ноутбуки</strong> (в Киеве и других городах) приобретают все большую популярность в среде компьютерных пользователей. Высокому спросу на ноутбуки (Киев, Донецк) способствует множество факторов. Так, несмотря на небольшие размеры и вес, ноутбуки ничем не уступают настольным компьютерам. Мало того. Многие современные ноутбуки по ряду параметров превосходят стационарные аналоги. При этом цены на ноутбуки в Украине вполне доступны даже покупателям со средним уровнем достатка. На отечественном рынке ноутбуки (Киев, Донецк, др. города) представлены достаточно широким ассортиментом. В зависимости от поставленных целей можно купить ноутбук (в Харькове, в Одессе) для учебы, работы либо для развлечений. Или же купить ноутбук (в Одессе, в Киеве), который позволит выполнять все выше перечисленные задачи в комплексе. <br><br>Купить ноутбук (в Донецке, в Харькове, в других городах Украины) сегодня не составляет особой проблемы. <strong>Ноутбуки</strong> (Харьков, Донецк, Одесса) предлагаются к продаже многочисленными магазинами, существующими практически в каждом городе. Однако выбор ноутбука может быть осуществлен более удобным способом. Так, в последнее время ноутбуки (в Киеве и других городах) все чаще покупаются при помощи Интернета. Приобретая ноутбуки (Украина: Харьков, Киев) данным способом, вы получаете массу неоспоримых преимуществ. В этом вы можете убедиться сами, воспользовавшись услугами нашего интернет-магазина Rozetka. У нас вы сможете купить ноутбуки (Киев, Луганск, Одесса), цены которых вас приятно удивят. При этом у нас можно не только дешево купить ноутбук, но и приобрести все необходимые к нему аксессуары. Для того чтобы купить ноутбук (Киев, Харьков), вам не придется затрачивать время и силы на походы по магазинам. Все операции в нашем интернет-магазине совершаются в виртуальном режиме. Поэтому купить ноутбук (в Киеве и других городах Украины) вы можете прямо сейчас, вне зависимости от места вашего проживания. <br><br>Осуществить выбор ноутбука необходимой модели вам поможет размещенная на нашем сайте информация. Здесь вы найдете подробнейший обзор ноутбуков от ведущих мировых производителей. Данный обзор ноутбуков поможет вам выбрать наиболее оптимальный вариант. Кроме того, вы можете прочесть полные технические характеристики всех представленных у нас ноутбуков. Большинство данных описаний включают в себя видео обзор ноутбуков. <br><br>Если же выбор ноутбука уже позади, то для его покупки вам необходимо лишь заполнить форму заказа. При этом оплату вашей покупки вы можете осуществить любым удобным для вас способом. Ноутбуки (Украина: Харьков, Львов, др. города) могут быть оплачены по наличному либо безналичному расчету. В нашем интернет-магазине вы можете не только недорого купить ноутбук, но и заказать его курьерскую доставку в любую точку Украины. Следует отметить что ноутбуки (Харьков, Одесса, Донецк) доставляются нашим покупателям в самые сжатые сроки. Так, ноутбуки в Киеве и других городах, где есть наши представительства, доставляются в течение нескольких часов. В более отдаленных регионах данный срок может достигать 2-3 дней.<br><br></div></div>
            <div class="text-description-more">
                <a href="#" id="short_text_show_link" class="novisited arrow-link text-description-more-link">
                    <span class="xhr arrow-link-inner">Читать полностью</span>&nbsp;→
                </a>
            </div>
        </div>

Код: 
.text-description-content.box-hide {
overflow: hidden;
max-height: 12em;
position: relative;}

.text-description-content.box-hide:before {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 4em;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #fff));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

.text-description-more {
text-align: right;
padding-bottom: 2em;
}

Как то так!
 
Внешний вид скрытого текста заработал, но расскрытие/скрытие не работает. Нужен еще скрипт. В оригинале он ниже самого блока, но при повторении его у себя так ничего и не получилось...
 
Код: 
$("#short_text").click(function() {
    $(this).toggleClass('open');
});
Код: 
#short_text.open{
max-height: auto !important;
}
#short_text.open:before {
display: none !important;
}

Можете транзишн добавить для плавности )
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху