Спойлер без JS

wetta · September 28, 2010

Доброго времени суток!

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

HTML:


<div class="spoil">
<div class="smallfont">Текст описания спойлера<input type="button" value="Развернуть" class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Развернуть'; }"/>
</div>
<div class="alt2">
<div style="display: none;">

текст внутри спойлера...

</div>
</div>
</div>

CSS:

alt2{ margin: 0px;  padding: 6px;  border: 1px inset;}
smallfont{margin-bottom:2px;}
spoil{margin:10px; margin-top:5px;}

Но текст с описание не разворачиваеться...

Помогите...

rus · September 28, 2010

а без js по клику именно не получится.

mishka · September 28, 2010

<input type="button" value="Развернуть" class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Развернуть'; }"/>

Это типа без скрипта?

Edited September 28, 2010 by mishka2

psywalker · September 28, 2010

Это типа без скрипта?

А это не скрипт, просто набор букв какой-то

mishka · September 28, 2010

wetta, если хочешь получить адекватный ответ - задай адекватный вопрос.

rash · September 28, 2010

Есть некроссбраузерное решение, только для тех, кто понимает CSS3-селекторы.

<!DOCTYPE HTML>

<title>Spoiler</title>

<style type="text/css" media="screen">
	#spoiler
	{
		display: none;
	}
	#spoiler:target
	{
		display: block;
	}
</style>

<a href="#spoiler">Просмотреть текст</a>
<div id="spoiler">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation
	ullamco laboris nisi ut aliquip ex ea commodo consequat.
	Duis aute irure dolor in reprehenderit in voluptate velit
	esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
	occaecat cupidatat non proident, sunt in culpa qui officia
	deserunt mollit anim id est laborum.
</div>

rus · September 28, 2010

rash, на сколько я понял ТС нужно по событию.

Edited September 28, 2010 by rus

rash · September 28, 2010

Это и будет происходить по клику на ссылку.

Потому что полноценно (например, на другое событие, или на несколько разных) «по событию» не получится без JS, он как раз и обеспечивает работу с событиями.

rus · September 28, 2010

Это и будет происходить по клику на ссылку.
Потому что полноценно (например, на другое событие, или на несколько разных) «по событию» не получится без JS, он как раз и обеспечивает работу с событиями.

почитал про параметр таргет там немного другой принцип у него, но в сочетании с дисплей блок и нон вроде как то что нужно.

ие как всегда в ауте.

rash · September 28, 2010

почитал про параметр таргет там немного другой принцип у него

В смысле?

Если ты имеешь в виду то, что можно будет дать заранее заготовленную ссылку с раскрытым спойлером — это да, если имеешь в виду что-то другое, то я пока не понял

rus · September 28, 2010

В смысле?
Если ты имеешь в виду то, что можно будет дать заранее заготовленную ссылку с раскрытым спойлером — это да, если имеешь в виду что-то другое, то я пока не понял

вот тут немного другое его применение:

:Target
Например, Предположим, у вас есть большие (длинные) страницы с большим количеством текста и h2 в заголовках, и есть индекс этих заголовков в верхней части страницы. Будет намного проще для пользователя, если при нажатии на определенную ссылку в индексе, заголовок будет подсвечен, а страница - прокручена к нему. Легко:
h2:target {
background: #F2EBD6;
}
Пару слов о кроссбраузерности
На этот раз, Internet Explorer действительно раздражает и не имеет поддержки для всех :target псевдо-классов. Другая загвоздка в том, что Opera не поддерживает этот селектор при использовании кнопок НАЗАД и ВПЕРЕД. Не считая всех этих нюансов, он поддерживается в других основных браузерах.

Vlad · September 28, 2010

IE 9 поддерживает target.

А мне понравилось такое нестандартное его использование. Мусье знает толк в извращениях.

SelenIT · September 28, 2010

Кроссбраузерно можно извратиться как-то так (см. колонки, на кот. написано большое слово CLICK). Но не нужно, имхо. Это совсем уж нецелевое использование ссылок и псевдоклассов...

rash · September 28, 2010

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

Но мы не будем только этим ограничиваться

Кстати с псевдоклассом active мне тоже очень нравится, к тому же еще более универсальное решение. Только поведение для спойлера нетипичное получается.

hf3 · September 28, 2010

а в чем проблема? Зачем извращения?

Vlad · September 28, 2010

rus, ну это понятно, но это ведь только одно из возможных применений, наверное просто самое очевидное и хорошо иллюстрирующее вообще нужность такого селектора.
Но мы не будем только этим ограничиваться
Кстати с псевдоклассом active мне тоже очень нравится, к тому же еще более универсальное решение. Только поведение для спойлера нетипичное получается.

Я вот даже набросал код с active. Не работает только в IE совсем, в остальных браузерах нормально все.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Спойлеры</title>
<style type="text/css">
.spoiler {display: none;}
a:active + p { display: block; }
</style>
</head>
<body>
<div>
<a href="#">Вы даже не догадаетесь, чем фильм Терминатор заканчивается.</a>
<p class="spoiler">Терминатора убили!</p>
</div>
</body>
</html>

rash · September 28, 2010

Так еще универсальнее — индивидуальные ID не нужны. Только состояние не фиксируется, но вариант отличный!

SelenIT · September 28, 2010

Во всех, кроме IE, состояние фиксируется по :focus вместо :active (или вместе, для надежности). Правда, только до потери этого фокуса, плюс можно случайно выбрать с клавиатуры.

А вот почему IE7 так артачится, мне непонятно. С :hover ведь аналогичный фокус проходит... Смена самой a:active цвета фона или hasLayout-а — такое помогало в IE6 с a:hover что-то, силой заставляя браузер перерисовывать ссылку и всё с ней связанное — тут не помогло. Но чует моя интуиция, что как-то побороть можно, сам по себе соседский селектор IE7 ведь практически поддерживает...

Vlad · September 29, 2010

В IE помогло изменение иерархии элементов. Типа такого

<a>Ссылка<span class="spoiler">Спойлер</span></a>

В стилях тогда указываем a:active .spoiler {}

Но вообще по дурацки и код выглядит и результат. Опять же, не во всех версиях IE такая перестановка работает.

rash · September 29, 2010

Странно, у меня во всех IE active ведет себя как focus, то есть не исчезает до клика в другом месте страницы.

Searcher · September 29, 2010

Странно, у меня во всех IE active ведет себя как focus, то есть не исчезает до клика в другом месте страницы.
«Ничего не понимаю» © Колобки

Вы путаете с :hover

rash · September 29, 2010

Вы путаете с :hover

Не путаю.

Vlad · September 29, 2010

Куда девочка пропала? Такую полемику затеяла, на первый взгляд глупым вопросом, а сама спряталась.

SelenIT · September 29, 2010

у меня во всех IE active ведет себя как focus

Я это и имел в виду, только выразился коряво. Поэтому для кроссбраузерности приходится прописывать их оба.

Со вложением спойлера в ссылку, конечно, будет работать (у Стью же работало. Но интересно выяснить, отчего такая свистопляска с :hover+нечто. Вечером, если не засну от усталости, поэкспериментирую...

iDrugov · October 21, 2012

Я конечно понимаю, что прошло много времени, но поднимаю тему. За два года кроссбраузерность не увеличилась? Что-то у меня данный спойлер контачит лишь в Опера.

sigma77 · October 22, 2012

http://jsfiddle.net/HGHyJ/

Должен работать везде кроме ИЕ8 и ниже.

Sign In

Спойлер без JS

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information