Нужен спойлер для текста

Тема в разделе "JavaScript", создана пользователем danneo, 20 дек 2012.

Модераторы: ZiX
  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.453
    Симпатии:
    113
    Нужно сделать в блоке DIV текст (статью), но чтобы выводился текст в ограниченном объеме, напирмер, до 1000 знаков. Остальной же текст скрыт. При нажатии на ссылку, блок раздвигается и отображается весь текст статьи.
     
  2. mustang86

    mustang86 Писатель

    Регистр.:
    13 дек 2012
    Сообщения:
    8
    Симпатии:
    0
    Попробуйте это:
    HTML:
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .spoiler {
        width: 200px;
        border: solid 1px red;
        padding: 10px;
    }
     
    .spoiler p {
        margin: 0;
        padding: 0;
    }
     
    .spoiler-hidden {
        height: 300px;
        overflow: hidden;
    }
     
    .spoiler-show {
        height: auto;
    }
    </style>
    </head>
    <body>
    <div id="spoiler1" class="spoiler spoiler-hidden">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor egestas dui, eu semper justo dictum ut. Morbi vitae felis eget mauris faucibus semper non id neque. Cras a augue leo, at viverra lectus. Proin tempor nunc quis diam vestibulum ac viverra nulla pharetra. Duis iaculis, leo sit amet ornare lacinia, leo nibh porta magna, vel porttitor lectus mi in enim. Pellentesque congue sem in mi feugiat quis tempus ante egestas. Curabitur ultrices auctor scelerisque. Mauris sollicitudin, lectus vel bibendum blandit, tellus risus fringilla turpis, eget congue magna elit et erat. Maecenas elementum suscipit vehicula. Nunc a hendrerit sapien. Duis nibh nisl, commodo vel iaculis at, adipiscing eu dui. Proin eleifend est quis tellus fringilla id ultricies diam viverra. Aenean leo enim, scelerisque quis porttitor sit amet, porta non nisi. Ut justo lectus, vehicula vitae condimentum nec, varius interdum sapien.</p>
        <p>Fusce condimentum, augue condimentum tincidunt hendrerit, justo quam mattis justo, sed adipiscing mauris libero id dui. In sagittis bibendum purus nec congue. In hac habitasse platea dictumst. Donec vitae felis neque, ut gravida velit. Curabitur fermentum neque in lorem tincidunt dignissim. Nulla facilisi. Aliquam sit amet mi risus, non feugiat nisl. Sed a felis in lorem hendrerit scelerisque ut at diam. Mauris quis eros quis ligula sagittis blandit non ac sapien. Pellentesque accumsan, lectus vel pellentesque dictum, sapien elit egestas velit, et blandit felis risus sed sem. Praesent vel ante id dui sodales lacinia. Sed sodales enim id tellus condimentum sed hendrerit metus lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    </div>
    <div class="spoiler-link">
        <a href="javascript: void(0);" onclick="document.getElementById('spoiler1').className = 'spoiler'">читать</a>
    </div>
    </body>
    </html>
     
  3. Waki

    Waki Постоялец

    Регистр.:
    14 ноя 2012
    Сообщения:
    64
    Симпатии:
    21
    fatalfist, lungsmoney и danneo нравится это.
  4. nikolawka

    nikolawka Писатель

    Регистр.:
    6 янв 2013
    Сообщения:
    1
    Симпатии:
    0
    Похожий вопрос, но по примеру выше немного не догнал.. Есть, например, строчка (100-200 символов), которая кликабельна. Как сделать, чтобы при клике на нее вниз открывался спойлер с неограниченным количеством текста и в самом спойлере было 'свернуть'? Примерно, как описано выше, т.к. дивов много. И еще вопрос - текст под спойлером будет индексируемым или нет?
     
  5. zyxelby

    zyxelby Создатель

    Регистр.:
    7 янв 2013
    Сообщения:
    14
    Симпатии:
    1
    то что тебе нужно
    Перейти по ссылке
    если что-то не поймешь спросиш + он на css3
     
    nikolawka нравится это.