[Помощь] Раскрывающийся текст

illmano

Старатель
Регистрация
20 Июн 2012
Сообщения
172
Реакции
14
Очень понравилась реализация раскрывающегося текста описания категории внизу страницы Для просмотра ссылки Войди или Зарегистрируйся

кто может помочь с кодом данной реализации? может готовый скрипт есть в интернете?
 
  • Заблокирован
  • #3
аккордеон называется

Для просмотра ссылки Войди или Зарегистрируйся
Где же ты там аккордеон увидел?
Это не вёрстка. Это JavaScript. Работает следующим образом. Есть 2 блока. Один сам текст, другой оверлей, для создания эффекта замутнения. Так вот... по клику на подробнее блоку оверлей присваивается
HTML:
display: none;
а блоку с текстом
HTML:
height: auto;
Ну и по клику свернуть снова показывается блок оверлея, а блоку с текстом указывается необходимая высота. Не забываем про overflow:hiiden для блока с текстом и position:relative для оверлея. Стиль оверлея на сайте
HTML:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffffff');
background: -moz-linear-gradient(rgba(255,255,255,0), #fff);
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0)), to(#fff));
background: -webkit-linear-gradient(rgba(255,255,255,0), #fff);
background: -o-linear-gradient(rgba(255,255,255,0), #fff);
background: linear-gradient(rgba(255,255,255,0), #fff);
Писать велосипеды для такой мелочи - конщунство, так что в инете готового ничего ты не найдёшь. Каждый делает это для себя как ему удобнее.
 
Писать велосипеды для такой мелочи - конщунство, так что в инете готового ничего ты не найдёшь. Каждый делает это для себя как ему удобнее.
Да погуглил, есть разные варианты, а именно такого не нашел :(
 
  • Заблокирован
  • #6
Да погуглил, есть разные варианты, а именно такого не нашел :(
Тебе прям именно такой нужен? Так что мешает скопировать вариант сайта? Неужели так сложно? Если сам не можешь сделаю тебе за 100 рублей "шаблончик"
 
Самое простое: Текст плавно выдвигается вниз
Код:
<script>
        $(function() {
            $(".button").click(function() {
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
</script>
HTML:
#panel {  
    display: none;      
}
.active {
    background: #2a5348;
    color:#fff;
}
 
Уберите якорь в <a></a> или используйте вместо <a> <span> например. Не получится - напишите, гляну.

UPD: Для просмотра ссылки Войди или Зарегистрируйся
 
Назад
Сверху