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

D

danneo

Честный
Регистрация
13 Ноя 2007
Сообщения
1.526
Реакции
121
Нужно сделать в блоке DIV текст (статью), но чтобы выводился текст в ограниченном объеме, напирмер, до 1000 знаков. Остальной же текст скрыт. При нажатии на ссылку, блок раздвигается и отображается весь текст статьи.
 
Попробуйте это:
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>
 
Похожий вопрос, но по примеру выше немного не догнал.. Есть, например, строчка (100-200 символов), которая кликабельна. Как сделать, чтобы при клике на нее вниз открывался спойлер с неограниченным количеством текста и в самом спойлере было 'свернуть'? Примерно, как описано выше, т.к. дивов много. И еще вопрос - текст под спойлером будет индексируемым или нет?
 
nikolawka написал(а):
Похожий вопрос, но по примеру выше немного не догнал.. Есть, например, строчка (100-200 символов), которая кликабельна. Как сделать, чтобы при клике на нее вниз открывался спойлер с неограниченным количеством текста и в самом спойлере было 'свернуть'? Примерно, как описано выше, т.к. дивов много. И еще вопрос - текст под спойлером будет индексируемым или нет?
Нажмите для раскрытия...
то что тебе нужно
Для просмотра ссылки Войди или Зарегистрируйся
если что-то не поймешь спросиш + он на css3
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху