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

[illmano]

Очень понравилась реализация раскрывающегося текста описания категории внизу страницы Для просмотра ссылки Войди или Зарегистрируйся

кто может помочь с кодом данной реализации? может готовый скрипт есть в интернете?

 

[ultra]

аккордеон называется

Для просмотра ссылки Войди или Зарегистрируйся

 

[Serafimer]

аккордеон называется

Для просмотра ссылки Войди или Зарегистрируйся

Где же ты там аккордеон увидел?
Это не вёрстка. Это JavaScript. Работает следующим образом. Есть 2 блока. Один сам текст, другой оверлей, для создания эффекта замутнения. Так вот... по клику на подробнее блоку оверлей присваивается

display: none;

а блоку с текстом

height: auto;

Ну и по клику свернуть снова показывается блок оверлея, а блоку с текстом указывается необходимая высота. Не забываем про overflow:hiiden для блока с текстом и position:relative для оверлея. Стиль оверлея на сайте

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);

Писать велосипеды для такой мелочи - конщунство, так что в инете готового ничего ты не найдёшь. Каждый делает это для себя как ему удобнее.

 

[ultra]

Где же ты там аккордеон увидел?

В сайдбаре, внимательнее смотри

 

[illmano]

Писать велосипеды для такой мелочи - конщунство, так что в инете готового ничего ты не найдёшь. Каждый делает это для себя как ему удобнее.

Да погуглил, есть разные варианты, а именно такого не нашел

 

[Serafimer]

Да погуглил, есть разные варианты, а именно такого не нашел

Тебе прям именно такой нужен? Так что мешает скопировать вариант сайта? Неужели так сложно? Если сам не можешь сделаю тебе за 100 рублей "шаблончик"

 

[funnywheel]

ну вот как-то так, Для просмотра ссылки Войди или Зарегистрируйся

 

[axper]

Самое простое: Текст плавно выдвигается вниз

<script>
        $(function() {
            $(".button").click(function() {
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
</script>

#panel {  
    display: none;      
}
.active {
    background: #2a5348;
    color:#fff;
}

 

[illmano]

ну вот как-то так, Для просмотра ссылки Войди или Зарегистрируйся

Вполне подходит, но почему меня все время скролит наверх когда я нажимаю read more?

 

[funnywheel]

Уберите якорь в <a></a> или используйте вместо <a> <span> например. Не получится - напишите, гляну.

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