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

Тема в разделе "Верстка", создана пользователем illmano, 2 сен 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Очень понравилась реализация раскрывающегося текста описания категории внизу страницы http://www.domalina.ru/gostinaya/dekorirovanie-gostinoy/kartini

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

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    201
    Симпатии:
    276
  3. Serafimer

    Serafimer Создатель

    Заблокирован
    Регистр.:
    24 апр 2014
    Сообщения:
    36
    Симпатии:
    17
    Где же ты там аккордеон увидел?
    Это не вёрстка. Это 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);
    Писать велосипеды для такой мелочи - конщунство, так что в инете готового ничего ты не найдёшь. Каждый делает это для себя как ему удобнее.
     
  4. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    201
    Симпатии:
    276
    В сайдбаре, внимательнее смотри ;)
     
  5. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Да погуглил, есть разные варианты, а именно такого не нашел :(
     
  6. Serafimer

    Serafimer Создатель

    Заблокирован
    Регистр.:
    24 апр 2014
    Сообщения:
    36
    Симпатии:
    17
    Тебе прям именно такой нужен? Так что мешает скопировать вариант сайта? Неужели так сложно? Если сам не можешь сделаю тебе за 100 рублей "шаблончик"
     
  7. funnywheel

    funnywheel WordPress developer

    Регистр.:
    6 авг 2010
    Сообщения:
    199
    Симпатии:
    126
    ну вот как-то так, jsfiddle
     
  8. axper

    axper Создатель

    Регистр.:
    14 авг 2014
    Сообщения:
    22
    Симпатии:
    6
    Самое простое: Текст плавно выдвигается вниз
    Код:
    <script>
            $(function() {
                $(".button").click(function() {
                    $("#panel").slideToggle("slow");
                    $(this).toggleClass("active"); return false;
                });
            });
    </script>
    
    HTML:
    #panel {  
        display: none;      
    }
    .active {
        background: #2a5348;
        color:#fff;
    }
    
     
  9. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Вполне подходит, но почему меня все время скролит наверх когда я нажимаю read more?
     
  10. funnywheel

    funnywheel WordPress developer

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

    UPD: посмотрите