[Помогите] Необычный сполер, как сверстать.

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Andreyлф, 26 фев 2014.

  1. Andreyлф

    Andreyлф

    Регистрация:
    25 янв 2013
    Сообщения:
    136
    Симпатии:
    3
    Всем приветь.
    Хочу сверстать необычный сполер, чтобы сначала показывалось 5 строк, а потом при нажатии на ссылку показывалось все остальное. В интернете нашел сполеры которые все сворачивают.

    Мне хотелось бы реализовать как на этом сайте


    справа у фильтра есть more/less при нажатии разворачивается с сворачивается.
     
    Lasted edited by : 26 фев 2014
  2. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
  3. Andreyлф

    Andreyлф

    Регистрация:
    25 янв 2013
    Сообщения:
    136
    Симпатии:
    3
    Этот вариант скроет/покажет весь блок, а мне нужно несколько строк оставить.
    Или я просто не знаю как с помощью этого варианта это сделать.
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    И что Вам в данном примере не понятно?
    Выводите часть текста в один див, а другой прячете. Все..
     
  5. Andreyлф

    Andreyлф

    Регистрация:
    25 янв 2013
    Сообщения:
    136
    Симпатии:
    3
    В чем вся суть то.

    Мне нужно скрыть половину 1 дива если он больше 5 строк.
     
  6. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    <script>
    function look(type){
    param=document.getElementById(type);
    if(param.style.display == "none") param.style.display = "block";
    else param.style.display = "none"
    }
    </script>

    <a href="javascript:look('div1');">показать/скрыть</a>
    <div id="div1" style="display:none">
    Скрытый текст
    </div>

    В этом скрипте изначально у дива стоит display:none, при клике меняется на display:block; Чтобы отображалось пять строк, надо заменить disply:none; на height: 125px; а display:block на height: auto; У дива заранее указать overflow:hidden; line-height: 125px;

    Цифры 25 и 125 - на ваш вкус, лишь бы в пять раз была разница.

    Не силен в яваскрипте, но предполагаю, что должно получиться так:
    <script>
    function look(type){
    param=document.getElementById(type);
    if(param.style.height == "125px") param.style.height = "auto";
    else param.style.display = "125px"
    }
    </script>
    <style>
    .spoiler {
    overflow:hidden;
    line-height: 25px;}
    </style>

    <a href="javascript:look('div1');">показать/скрыть</a>
    <div class="spoiler" id="div1" style="height: 125px;">
    Скрытый текст
    </div>