Как сделать спойлер без JS?

@SlayerLiving · Регистрация: 25.04.2012

Студворк — интернет-сервис помощи студентам

Мне нужно сделать спойлеры для этой страницы:
http://saytum.ru/faq

Примерно так же как на этой странице:
http://www.seone.ru/vazhno-znat/faq/

Но выпадающий текст должен индаксироваться! Так что JS не подходит. На одном из форумов мне кинули вот такой код:

HTML5
1
2
<a class="dynamic" href="#" onclick="$('.spoiler').toggle();return false;">Подробнее...</a>
<div class="spoiler">Скрытый текст</div>

#если несколько спойлеров на странице, то меняем на spoilerN в теге A и в div

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.spoiler {
  display: none;
}
.spoiler1 {
  display: none;
}
 
class="dynamic"
a.dynamic {
    border-bottom: 1px dashed #0066CC;
    text-decoration: none;
}

НО как он работает я так и не понял...

@Heleg · 25.04.2012, 17:17

ну короче, тут библиотека jquery. по умолчанию крытый текст скрыт (display: none; ), при щелчке на .dynamic display меняется на block
зачем класс spoiler1 мне непонятно

Добавлено через 3 минуты
а, понял зачем

Сообщение от SlayerLiving

#если несколько спойлеров на странице, то меняем на spoilerN в теге A и в div

это бред

@allukard · 26.04.2012, 09:53

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    var id_menu = new Array('user_block_1');
startList = function allclose() {
    for (i=0; i < id_menu.length; i++){
        document.getElementById(id_menu[i]).style.display = "none";
    }
}
 
 
function openMenu(id){
    for (i=0; i < id_menu.length; i++){
        if (id != id_menu[i]){
            document.getElementById(id_menu[i]).style.display = "none";
        }
    }
    if (document.getElementById(id).style.display == "block"){
        document.getElementById(id).style.display = "none";
    }else{
        document.getElementById(id).style.display = "block";
    }
}
window.onload=startList;
</script>

HTML5
1
2
3
4
<p  class="post_user_otkl"><a href="#" onclick="openMenu('user_block_1');return(false)">Показать все комментарии..</a> 
<div id="user_block_1">
//text
</div>

@Heleg · 26.04.2012, 10:50

Макc, это перебор

@tgarl · 26.04.2012, 11:10

у человека тема без js - а это css3? что не будет дружить с ie

если же все же устроит js как предлагают выше можно еще так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">
    
$(document).ready(function(){
    $('a.cli').click(function(){
        if($(this).parent().next('div').hasClass("clion")){
            $('div.cli').removeClass("clion");
        }
        else{
        $('div.cli').removeClass("clion");
        $(this).parent().next('div').addClass("clion");
        }
    });
 
});
</script>
<p><a href="javascript:void(0);" class="cli">Маршрут</a></p>
 
<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>
 
<p><a href="javascript:void(0);" class="cli">Маршрут2</a></p>
 
<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

@Heleg · 26.04.2012, 11:11

я если найду код, который писал парню в похожей теме – вышлю

@allukard · 26.04.2012, 12:03

Сообщение от Heleg

Макc, это перебор

ой действительно! заголовок то какой!!!

@Heleg · 26.04.2012, 23:02

о, нашел

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div#content {
            width: 200px;
            height: 100%;
            margin: 0 auto;
        }
        
        p.post {
            background: #CCC;
        }
        
        p.read_more {
            background: #EE2255;
            text-align: center;
        }
        
    </style>
    <script type="text/javascript">
    
    // параметры
    var parameters = {
        buttonClass: 'read_more', //класс для кнопки
        hiddenTextClass: 'hidden' //класс для скрытого текста
    }
    
    
    
        function readMoreButton() {
            var p = document.createElement('p');
            p.setAttribute('class', parameters.buttonClass);
            var button = document.createElement('a');
            button.appendChild(document.createTextNode('читать далее'));
            p.appendChild(button);
            p.onclick = function() {
                this.previousSibling.style.display = 'inline';
                this.parentNode.removeChild(this);
                return false;
            }
            
            return p;
        }
        
        
        function insertAfter(parent, node, referenceNode) {
            parent.insertBefore(node, referenceNode.nextSibling);
        }
        
        
        if(document.getElementsByClassName) {
 
            getElementsByClass = function(classList, node) {    
                return (node || document).getElementsByClassName(classList)
            }
 
        } else {
 
            getElementsByClass = function(classList, node) {            
                var node = node || document,
                list = node.getElementsByTagName('*'), 
                length = list.length,  
                classArray = classList.split(/\s+/), 
                classes = classArray.length, 
                result = [], i,j
                for(i = 0; i < length; i++) {
                    for(j = 0; j < classes; j++)  {
                        if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                            result.push(list[i])
                            break
                        }
                    }
                }
 
                return result
            }
        }
        
        window.onload = function() {
            
            var hiddenTexts = getElementsByClass(parameters.hiddenTextClass, document.getElementsByTagName('body')[0]);
            for(var i = 0; i<hiddenTexts.length; i++) {
                hiddenTexts[i].style.display = 'none';
                hiddenTexts[i].parentNode.insertBefore(readMoreButton(), hiddenTexts[i].nextSibling);
            }
            
        }
        
    </script>
</head>
<body>
 
<div id="content">
    <p class="post"><span>видимый текст видимый текст видимый текст видимый текст видимый текст видимый текст </span><span class="hidden">скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст </span></p>
    <p class="post"><span>видимый текст видимый текст видимый текст видимый текст видимый текст видимый текст </span><span class="hidden">скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст </span></p>
    <p class="post"><span>видимый текст видимый текст видимый текст видимый текст видимый текст видимый текст </span><span class="hidden">скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст </span></p>
</div>
</body>

Добавлено через 3 минуты
span с классом hidden будет скрыт, а перед ним в коде появится кнопка

Добавлено через 11 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div#content {
            width: 200px;
            height: 100%;
            margin: 0 auto;
        }
        
        p.post {
            background: #CCC;
        }
        
        p.read_more {
            background: #EE2255;
            text-align: center;
        }
        
    </style>
    <script type="text/javascript">
    
    // параметры
    var parameters = {
        buttonClass: 'read_more', //класс для кнопки
        buttonText: 'читать далее', //текст внутри кнопки
        hiddenTextClass: 'hidden' //класс для скрытого текста
    }
    
    
    
        function readMoreButton() {
            var p = document.createElement('p');
            p.setAttribute('class', parameters.buttonClass);
            var button = document.createElement('a');
            button.setAttribute('href','#');
            button.appendChild(document.createTextNode(parameters.buttonText));
            p.appendChild(button);
            p.onclick = function() {
                this.previousSibling.style.display = 'inline';
                this.parentNode.removeChild(this);
                return false;
            }
            
            return p;
        }
        
        
        function insertAfter(parent, node, referenceNode) {
            parent.insertBefore(node, referenceNode.nextSibling);
        }
        
        
        if(document.getElementsByClassName) {
 
            getElementsByClass = function(classList, node) {    
                return (node || document).getElementsByClassName(classList)
            }
 
        } else {
 
            getElementsByClass = function(classList, node) {            
                var node = node || document,
                list = node.getElementsByTagName('*'), 
                length = list.length,  
                classArray = classList.split(/\s+/), 
                classes = classArray.length, 
                result = [], i,j
                for(i = 0; i < length; i++) {
                    for(j = 0; j < classes; j++)  {
                        if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                            result.push(list[i])
                            break
                        }
                    }
                }
 
                return result
            }
        }
        
        window.onload = function() {
            
            var hiddenTexts = getElementsByClass(parameters.hiddenTextClass, document.getElementsByTagName('body')[0]);
            for(var i = 0; i<hiddenTexts.length; i++) {
                hiddenTexts[i].style.display = 'none';
                hiddenTexts[i].parentNode.insertBefore(readMoreButton(), hiddenTexts[i].nextSibling);
            }
            
        }
        
    </script>
</head>
<body>
 
<div id="content">
    <p class="post"><span>видимый текст видимый текст видимый текст видимый текст видимый текст видимый текст </span><span class="hidden">скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст </span></p>
    <p class="post"><span>видимый текст видимый текст видимый текст видимый текст видимый текст видимый текст </span><span class="hidden">скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст </span></p>
    <p class="post"><span>видимый текст видимый текст видимый текст видимый текст видимый текст видимый текст </span><span class="hidden">скрытый текст скрытый текст скрытый текст скрытый текст скрытый текст </span></p>
</div>
</body>
</html>

добаил ещё один параметр

Vovan-VE · 28.04.2012, 19:50

В целом идея такая: http://jsfiddle.net/PX55t/

HTML5
1
2
3
4
5
<div class="spoiler">
    <input type="checkbox" id="x" />
    <label class="title" for="x">Title</label>
    <div class="body">Lorem ipsum dolor sit amet consectepture adipisicing elit sed do eiusmod.</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.spoiler {
    width: 200px;
    border: #ccc solid 1px;
}
.spoiler > .title {
    display: block;
    padding: 4px;
}
.spoiler > .body {
    padding: 4px;
    border-top: #ccc solid 1px;
    display: none;
}
.spoiler > :checked ~ .body {
    display: block;
}

Вся беда в потребности в id. Чтобы избавиться от id, надо input вложить в label. Но тогда беда в css: нет псевдо-класса :contains(), чтобы выбрать :contains(:checked), и нет выдоха к родителю, чтобы от :checked вылезть наверх к label:

HTML5
1
2
3
4
<div class="spoiler">
    <label class="title"><input type="checkbox" />Title</label>
    <div class="body">Lorem ipsum dolor sit amet consectepture adipisicing elit sed do eiusmod.</div>
</div>

Поэтому альтернативный вариант изврата: http://jsfiddle.net/e4DeZ/

HTML5
1
2
3
4
5
<label class="spoiler">
    <input type="checkbox" />
    <div class="title">Title</div>
    <div class="body">Lorem ipsum dolor sit amet consectepture adipisicing elit sed do eiusmod.</div>
</label>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.spoiler {
    display: block;
    width: 200px;
    border: #ccc solid 1px;
}
.spoiler > .title {
    padding: 4px;
}
.spoiler > .body {
    padding: 4px;
    border-top: #ccc solid 1px;
    display: none;
}
.spoiler > :checked ~ .body {
    display: block;
}

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

@Lane · 28.04.2012, 21:47

Vovan-VE, классное решение ) Галку можно спрятать через display: none, а жмакать по label..

@Heleg · 30.04.2012, 17:22

это круто!

@Forastero · 18.05.2013, 22:23

Vovan-VE, напомни как вот такую вложенность селекторов

CSS
1
.spoiler > :checked ~ .body

Я так понимаю - это Прямые checked потомки класса .spoiler, после которых нужно отобрать все элементы с классом .body?

Vovan-VE · 19.05.2013, 05:47

Сообщение от SoraxWeb

Я так понимаю - это Прямые checked потомки класса .spoiler, после которых нужно отобрать все элементы с классом .body?

Да, так и есть.

@markeley · 21.11.2013, 14:49

Vovan-VE, спасибо за спойлер! Только вот такая проблема при первой загрузке страницы не отображаются стили спойлера, а после перезагрузки страницы все работает.
Первая загрузка, имеется ввиду в браузере в котором еще не заходили на эту страницу.

HTML5
1
2
3
4
5
<label class="spoiler1">
    <input type="checkbox" class="bo"/>
    <div class="title">Резервная солнечная система для дачи на 1 кВт</div>
    <div class="body">Как правило системы для дачи заказывают небольшой мощности, даже малой мощности (например, чтобы включить только телевизор и холодильник). Ниже, для примера, коммерческое предложение на солнечную систему для дачи.</div>
</label>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.spoiler1 {
 
    display: block;
    background: #2f5585;
    text-decoration: none;
    color: white;
    font-weight: bold;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 0 5px 0 5px;
    margin: 0 0 5px 0;
}
.spoiler1 > .title {
 
    font-weight: bold;
}
.spoiler1 > .body {
    padding: 4px;
 
    font-weight: normal;
    font-size: 11pt;
    text-align: justify;  
    display: none;
}
.spoiler1 > .bo {
    display: none;
}
.spoiler1 > :checked ~ .body {
    display: block;
}

Vovan-VE · 21.11.2013, 15:02

Нельзя скрывать checkbox и radio, когда от них требуется такое поведение. По крайней мере, нельзя так явно скрывать через display: none, или т.п. Моментально перестанет работать по меньшей мере в одном из наиболее распространенных браузеров. Делать им нулевой размер тоже не все браузеры позволяют.

Также хочу заметить, что преложенный вариант не был готовым продуктом, а был лишь демо-примером самой идеи, что сабжвый спойлер в принципе возможно сделать. Доработка напильником, выявление багов и побочных эффектов - дело самостоятельное.

Также, поскольку label принимает фокус и проглатывает любой клик внутри, область применения такого спойлера уже существенно ограничивается. Также наблюдались проблемы с выделением текста внутри такого спойлера.

@markeley · 21.11.2013, 15:14

Ясно. Спасибо. Этот Спойлер работает в хроме, фаерфоксе и опере, но только после первой и единоразовой перезагрузки страницы. А с выделением текста не проблема, пусть меньше выделяют и копируют)

@newJS · 21.11.2013, 21:17

Спойлер на html

@Игорь[Igor] · 04.03.2016, 10:20

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
.spoiler
{
    margin: 10px;
    margin-top:5px;
}
.spoiler-body
{
    margin: 0px;
    padding: 6px;
    border: 0px inset;
}
.spoiler-title
{
    margin-bottom:2px;
    text-decoration: underline;
    cursor: pointer;
}
</style>
<div class="spoiler">
    <span class="spoiler-title" onclick="
        if (this.parentNode.getElementsByTagName('div')[0].style.display != '')
        {
            this.parentNode.getElementsByTagName('div')[0].style.display = '';
            this.innerText = 'свернуть';
        }
        else
        {
            this.parentNode.getElementsByTagName('div')[0].style.display = 'none';
            this.innerText = 'показать';
        }">
        показать
    </span>
    <div class="spoiler-body" style="display: none;">
        Текст внутри спойлера
    </div>
</div>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	26.04.2012, 10:50
	Макc, это перебор 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	26.04.2012, 11:11
	я если найду код, который писал парню в похожей теме – вышлю 0

@Lane 32 / 30 / 1 Регистрация: 08.03.2012 Сообщений: 96
	28.04.2012, 21:47
	Vovan-VE, классное решение ) Галку можно спрятать через display: none, а жмакать по label.. 1

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	30.04.2012, 17:22
	это круто! 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	21.11.2013, 15:02
	Нельзя скрывать checkbox и radio, когда от них требуется такое поведение. По крайней мере, нельзя так явно скрывать через display: none, или т.п. Моментально перестанет работать по меньшей мере в одном из наиболее распространенных браузеров. Делать им нулевой размер тоже не все браузеры позволяют. Также хочу заметить, что преложенный вариант не был готовым продуктом, а был лишь демо-примером самой идеи, что сабжвый спойлер в принципе возможно сделать. Доработка напильником, выявление багов и побочных эффектов - дело самостоятельное. Также, поскольку label принимает фокус и проглатывает любой клик внутри, область применения такого спойлера уже существенно ограничивается. Также наблюдались проблемы с выделением текста внутри такого спойлера. 0

@markeley 0 / 0 / 0 Регистрация: 21.11.2013 Сообщений: 2
	21.11.2013, 15:14
	Ясно. Спасибо. Этот Спойлер работает в хроме, фаерфоксе и опере, но только после первой и единоразовой перезагрузки страницы. А с выделением текста не проблема, пусть меньше выделяют и копируют) 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	21.11.2013, 21:17
	Спойлер на html 0

Как сделать спойлер без JS?

Решение