ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Несколько спойлеров
19 сообщений из 19, страница 1 из 1
Несколько спойлеров
    #38214387
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
Здравствуйте, как сделать один спойлер у меня есть пример, давно для веба не писал, отвык, как будет создать несколько спойлеров из моей заготовки, что подправить?

Код: html
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.
<!DOCTYPE html>
<!--html5-->
 
<html>
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 
<!--
Сервис для проверки валидности сайта:
http://validator.w3.org/#validate_by_input
http://validator.w3.org/#validate_by_uri
-->
<title>Спойлер с Jquery, JavaScript as html5</title>
 
<!--нужен файл jquery-1.8.0.min.js-->
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.splLink').click(function(){ 
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
 
<style type="text/css">
.splCont{display:none; padding:3px 5px;}
}
</style>
 
</head>
 
<body>
 
<p>Нужен файл jquery-1.8.0.min.js</p>
 
<!--тег <strong> (strong — имеющий преимущество) — тег-контейнер, логически выделяет, усиливает текст-->
<a href="javscript://" class="splLink"><strong>Спойлер1:</strong></a>
<div class="splCont"> 
Это примерный текст Спойлер1!
</div>
 
<p></p> 
 
<a href="javscript://" class="splLink"><strong>Спойлер2:</strong></a>
<div class="splCont"> 
Это примерный текст Спойлер2!
</div> 
 
</body>
  
</html>



Спасибо
...
Рейтинг: 0 / 0
05.04.2013, 13:56
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215099
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
катастрофакак будет создать несколько спойлеров из моей заготовки, что подправить?
Нужно видеть твой хтмл где несколько спойдеров...
...
Рейтинг: 0 / 0
05.04.2013, 19:50
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215103
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
krvsa,
>Нужно видеть твой хтмл где несколько спойдеров... - так код хтмл выложен
...
Рейтинг: 0 / 0
05.04.2013, 19:55
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215187
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
или вот второй вариант нашёл

Код: html
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.
105.
106.
107.
108.
109.
110.
<!DOCTYPE HTML>
<html>

<head>
<title>спойлер</title>

<style type="text/css">
body {
    background: #CCC;
}
.desc {
    background: #333;
    padding: 0 5px;
    border-radius: 0 0 5px 5px;
    margin-top: 22px;
}
.desc p {
    cursor: text;
    color: #FFF;
}
.close {    
    display: none;
    width: 100%;
    height: 22px;
    background: #FF6;
    border-radius: 5px 5px 0 0;
    text-indent: 10px;
    cursor: default;
    border-bottom: 1px dotted #000;
    position: absolute;
    top: 0px;
    left: 0;
}
.close:hover {   
    background: #f5ff27;
}
.open:before {
    content: 'Открытоооь';
    border-bottom: 1px dotted #000;
    cursor: default;
    text-indent: 10px;
    border-radius: 5px 5px 0 0;
    width: 100%;
    height: 22px;
    background: #FF6;
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
}
.open:hover:before {
    background: #f5ff27;
}
.open {
    margin: 5px 0 0 15px;
    height: 23px;  
    width: 240px;
    outline: none;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    transition: height 0.3s ease;
}
.open:focus {
    height: 122px;
}
.open:focus .close {
    display: block;
}
.open:focus:before {
    display: none;
}
</style>

</head>
 
<body>

<div class="open" role="tab"tabindex="1">
    <div role="tabpanel" class="desc">
        <p>Нужно знать</p>
    </div>
    <span role="button" tabindex="0" class="close">За</span>
</div>
 
<div class="open" role="tab" tabindex="2">
    <div role="tabpanel" class="desc">
        <p>Нужно знать как и что делать</p>
    </div>
    <span role="button" tabindex="0" class="close">Закр</span>
</div>

<div class="open" role="tab" tabindex="3">

    <div role="tabpanel" class="desc">

        <p>Нужно знать как и что делать, чтобы текст</p>

    </div>

    <span role="button" tabindex="0" class="close">Закрыт</span>

</div>

</body>
 
</html>


как здесь у каждого спойлера свой текст сделать типа Вопрос1, Вопрос2 и чтобы спойлер раскрывался на высоту помещенного в него текста?
...
Рейтинг: 0 / 0
05.04.2013, 22:19
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215292
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
катастрофакак здесь у каждого спойлера свой текст сделать типа Вопрос1, Вопрос2
Ну к примеру задать идентификаторы и соответсвующие стили:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
#the-first-question.open:before {
  content:'Вопрос 1';
}
      
#the-second-question.open:before {
  content:'Вопрос 2';
}
      
#the-third-question.open:before {
  content:'Вопрос 3';
}


катастрофаи чтобы спойлер раскрывался на высоту помещенного в него текста?
Придётся отказаться от transition :
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
.open {
  height: 23px;
  margin: 5px 0 0 15px;
  outline: none;
  overflow: hidden;
  position: relative;
  width: 240px;
}
      
.open:focus {
  height: auto;
}
...
Рейтинг: 0 / 0
06.04.2013, 07:47
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215335
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
катастрофа так код хтмл выложен
Там один спойлер. Х/з как ты собираешся делать все остальные...
...
Рейтинг: 0 / 0
06.04.2013, 11:07
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215376
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
skyANA, спасибо, одним Вашим советом воспользовался
>Ну к примеру задать идентификаторы и соответсвующие стили: - не доганяю как это, пока у меня есть этот код страницы:

Код: html
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.
105.
106.
107.
108.
109.
110.
111.
<!DOCTYPE HTML>
<html>

<head>
<title>Спойлер</title>

<style type="text/css">
body {
    background: #CCC;
}

.desc {
    background: #333;
    padding: 0 5px;
    border-radius: 0 0 5px 5px;
    margin-top: 22px;
}

.desc p {
    cursor: text;
    color: #FFF;
}

.close {    
    display: none;
    width: 100%;
    height: 22px;
    background: #FF6;
    border-radius: 5px 5px 0 0;
    text-indent: 10px;
    cursor: default;
    border-bottom: 1px dotted #000;
    position: absolute;
    top: 0px;
    left: 0;
}

.close:hover {   
    background: #f5ff27;
}

.open:before {
    content: 'Открыть';
    border-bottom: 1px dotted #000;
    cursor: default;
    text-indent: 10px;
    border-radius: 5px 5px 0 0;
    width: 100%;
    height: 22px;
    background: #FF6;
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
}

.open:hover:before {
    background: #f5ff27;
}

.open {
  height: 23px;
  margin: 5px 0 0 15px;
  outline: none;
  overflow: hidden;
  position: relative;
  width: 240px;
}
 
/*при открытии спойлера высота его должна быть по высоте содержимого в спойлере*/ 
.open:focus {
  height: auto;
}

.open:focus .close {
    display: block;
}

.open:focus:before {
    display: none;
}
</style>

</head>
 
<body>

<div class="open" role="tab"tabindex="1">
<div role="tabpanel" class="desc">
<p>Нужно знать</p>
</div>
<span role="button" tabindex="0" class="close">Закрыть</span>
</div>
 
<div class="open" role="tab" tabindex="2">
<div role="tabpanel" class="desc">
<p>Нужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делать</p>
</div>
<span role="button" tabindex="0" class="close">Закрыть</span>
</div>

<div class="open" role="tab" tabindex="3">
<div role="tabpanel" class="desc">
<p>Нужно знать как и что делать, чтобы текстНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делатьНужно знать как и что делать</p>
</div>
<span role="button" tabindex="0" class="close">Закрыть</span>
</div>

</body>
 
</html>
...
Рейтинг: 0 / 0
06.04.2013, 13:26
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215378
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
и ещё где это в коде и как сделать, чтобы спойлер закрывался строго по закладке закрыть, он закрывается при нажатии в любом месте? Спасибо
...
Рейтинг: 0 / 0
06.04.2013, 13:29
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215477
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
катастрофа>Ну к примеру задать идентификаторы и соответсвующие стили: - не доганяю как этоЖаль.
Код: css
1.
2.
3.
#the-#the-first-question.open:before {
  content:'Вопрос 1';
}

Это читается как: данное правило применяется для элемента с классом "open" и идентификатором "the-first-question".
В Вашем коде ровно три элемента класса "open" без id. Ровно три идентификатора я предложил задать. Вот и задайте.
...
Рейтинг: 0 / 0
06.04.2013, 16:16
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215485
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
катастрофаи ещё где это в коде и как сделать, чтобы спойлер закрывался строго по закладке закрыть, он закрывается при нажатии в любом месте? СпасибоЭто реализовано средствами CSS, через псевдокласс :focus . Чтобы спойлер закрывался строго по закладке закрыть, надо искать другое решение.
...
Рейтинг: 0 / 0
06.04.2013, 16:22
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215618
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
skyANA,
то есть в
.open:before {
content: 'Показать'; - на мусорку??
а написал методом тыка:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<div class="open" role="tab" tabindex="1">
<div role="tabpanel" class="desc">
#the-first-question.open:before {
  content:'Вопрос 1';
}
<p>
Текст
</p>
</div>
<span role="button" tabindex="0" class="close">Закрыть</span>
</div>

<div class="open" role="tab" tabindex="1">
<div role="tabpanel" class="desc">
#the-second-question.open:before {
  content:'Вопрос 2';
}
<p>
Текст
</p>
</div>
<span role="button" tabindex="0" class="close">Закрыть</span>
</div>


получил облом, как нужно?
...
Рейтинг: 0 / 0
06.04.2013, 20:31
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215639
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
по цвету в Блокноте++ понял, что фигню написал, переделал css
Код: 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.
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.
<style type="text/css">
.desc {
    background: #333;
    padding: 0 5px;
    border-radius: 0 0 5px 5px;
    margin-top: 22px;
}

.desc p {
    cursor: text;
    color: #FFF;
}

.close {    
    display: none;
    width: 100%;
    height: 22px;
    background: #FF6;
    border-radius: 5px 5px 0 0;
    text-indent: 10px;
    cursor: default;
    border-bottom: 1px dotted #000;
    position: absolute;
    top: 0px;
    left: 0;
}

.close:hover {   
    background: #f5ff27;
}

.open:before {
    
    border-bottom: 1px dotted #000;
    cursor: default;
    text-indent: 10px;
    border-radius: 5px 5px 0 0;
    width: 100%;
    height: 22px;
    background: #FF6;
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
}

.open:hover:before {
    background: #f5ff27;
}

.open {
  height: 23px;
  margin: 5px 0 0 15px;
  outline: none;
  overflow: hidden;
  position: relative;
/*ширина спойлера в закрытом и раскрытом состоянии*/ 
  width: 740px;
}
 
/*при открытии спойлера высота его должна быть по высоте содержимого в спойлере*/ 
.open:focus {
  height: auto;
}

.open:focus .close {
    display: block;
}

.open:focus:before {
    display: none;
}

#the-first-question.open:before {
  content:'Вопрос 1';
}

#the-second-question.open:before {
  content:'Вопрос 2';
}
</style>


всё остальное оставил как есть - облом
????
...
Рейтинг: 0 / 0
06.04.2013, 21:14
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215657
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
катастрофапо цвету в Блокноте++ понял, что фигню написал

Это называется гляжу в книгу - вижу фигу.

Я Вам говорю: задайте идентификаторы элементам с классом "open".
Например:
Код: html
1.
<div class="open" id="the-first-question" role="tab" tabindex="1">

Тогда правило
Код: css
1.
2.
3.
#the-first-question.open:before {
  content:'Вопрос 1';
}

применится.
...
Рейтинг: 0 / 0
06.04.2013, 21:43
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215677
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
skyANA, СПАСИБО!!!!!
окейно, въехал, осталось непонятно как сделать с переходом на другую строку, типа

#the-second-question.open:before {
content:'Открыть Районные пункты выдачи (в том числе приравненные к ним городские)<br>
Адыгея';
}

то есть должно выглядеть как
Открыть Районные пункты выдачи (в том числе приравненные к ним городские)
Адыгея
что вместо <br>?? в css?
...
Рейтинг: 0 / 0
06.04.2013, 22:04
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215682
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
и в хтмл не прёт <br>
Код: html
1.
2.
<span role="button" tabindex="0" class="close">Районные пункты выдачи (в том числе приравненные к ним городские)<br>
Адыгея</span>


что вместо него??? Спасибо
...
Рейтинг: 0 / 0
06.04.2013, 22:09
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215694
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
катастрофачто вместо <br>?? в css?хз
...
Рейтинг: 0 / 0
06.04.2013, 22:38
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215702
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Можно тупо высоту увеличить.
...
Рейтинг: 0 / 0
06.04.2013, 22:53
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215813
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
skyANA,
ясно, спасибо!!!!!!
...
Рейтинг: 0 / 0
07.04.2013, 06:03
| Ответить | Цитировать | Написать  
Несколько спойлеров
    #38215815
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
забыл спросить как уладить ошибки указанные валидатором?
An element with role=tab requires role=tablist on the parent.
<div class="open" role="tab" tabindex="1">
...
Рейтинг: 0 / 0
07.04.2013, 06:21
| Ответить | Цитировать | Написать  
19 сообщений из 19, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Несколько спойлеров
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38215335&tid=1448480]:
 0ms
get settings:
 7ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 159ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 73ms
get tp. blocked users:
 2ms
others: 214ms
total:  485ms
созд. / загр.: 485ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]