Форум Сайтостроение Веб-строительство

Как создать спойлер "читать далее"

[Удален]
2862

Нахожу только то, как сделать обычный спойлер, где нажимаешь кнопку и разворачивается текст, который находится в отдельном блоке. Нужно сделать, чтобы в конце оборванного текста был кликабельный текст "Читать далее" при нажатии на который разворачивался остальной.

Вот как внизу этой страницы:

http://rozetka.com.ua/

[Удален]
#1

при чем надо так сделать, что бы скрытый текст также индексировался, на сколько я знаю, то в таком случае javascript не подходит...

B
На сайте с 19.04.2014
Offline
29
Belfis
#2

Что мешает сделать на css? примерно так 


.spoiler > input + label:after{content: "+";float: right;}

.spoiler > input:checked + label:after{content: "-";float: right;}

.spoiler > input{display:none;}

.spoiler > input + label , .spoiler > .spoiler_body{background:#CCC;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}

.spoiler > input + label + .spoiler_body{display:none;}

.spoiler > input:checked + label + .spoiler_body{display: block;}

.spoiler > .spoiler_body{background: #FFF;border: 3px solid #CCC;border-top: none;}



<div class="spoiler">

<input type="checkbox" id="spoilerid_1"><label for="spoilerid_1">

Титл

</label><div class="spoiler_body">

Скрываемый текст

</div></div>
[Удален]
#3

Спасибо!

Я пробовал также и другой вариант и пробую ваш, в обеих случаях при первой загрузке страницы спойлер не корректно работает и отображается... но при этом после перезагрузки уже нормально. Как у других будет? С первого раза у всех так будет?

Google Updates - апдейты Выкинули из РСЯ Это нормальные Аши?
[Удален]
#4

Какой вариант не пробую - не нравиться, везде присутствуют блоки, а надо просто сделать, чтобы текст продолжался после нажатия и сам спойлер исчезал. Вот как в магазине розетка:

http://rozetka.com.ua/ - проще некуда

---------- Добавлено 07.07.2016 в 20:28 ----------

В общем подобрал спойлер, осталось только сделать так, чтобы он исчезал после нажатия

Упал доход Google тестирует блок локальной Позиции и ранжирование ИИ
totamon
На сайте с 12.05.2007
Offline
437
totamon
#5
Provizor071:
Вот как в магазине розетка:

ну открой код страницы и посмотри как там...

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
[Удален]
#6
totamon:
ну открой код страницы и посмотри как там...

Та я уже вот второй день смотрю да не понимаю..

В стилях ведь не может быть кода отвечающего за исчезновение спойлера (текста), чтобы нажол на него, а он после - исчез. Вот это главное сделать

Замшевая
На сайте с 09.02.2015
Offline
30
Замшевая
#7
Provizor071:
Та я уже вот второй день смотрю да не понимаю..
В стилях ведь не может быть кода отвечающего за исчезновение спойлера (текста), чтобы нажол на него, а он после - исчез. Вот это главное сделать

Конечно в стилях не может быть

[Удален]
#8

Provizor071, http://www.unmedia.ru/Osnovy-Kontentnoj-optimizacii.html

<span class="nexttext">читать далее</span>
span.nexttext{
color:#ec7404;
font-style:italic;
cursor: pointer;
}
span.nexttext ~*{
display:none;
}
$("span.nexttext").livequery('click', function() {if($('span.nexttext ~ *').size()-10>0){$('span.nexttext ~ *').eq(10).after('<span class="nexttext">читать далее</span>');$(this).remove()}else{$(this).remove()};});

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий