Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Несколько спойлеров / 19 сообщений из 19, страница 1 из 1
05.04.2013, 13:56
    #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, 19:50
    #38215099
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Несколько спойлеров
катастрофакак будет создать несколько спойлеров из моей заготовки, что подправить?
Нужно видеть твой хтмл где несколько спойдеров...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.04.2013, 19:55
    #38215103
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Несколько спойлеров
krvsa,
>Нужно видеть твой хтмл где несколько спойдеров... - так код хтмл выложен
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.04.2013, 22:19
    #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
| Ответить | Цитировать | Написать  
06.04.2013, 07:47
    #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, 11:07
    #38215335
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Несколько спойлеров
катастрофа так код хтмл выложен
Там один спойлер. Х/з как ты собираешся делать все остальные...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.04.2013, 13:26
    #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:29
    #38215378
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Несколько спойлеров
и ещё где это в коде и как сделать, чтобы спойлер закрывался строго по закладке закрыть, он закрывается при нажатии в любом месте? Спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.04.2013, 16:16
    #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:22
    #38215485
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Несколько спойлеров
катастрофаи ещё где это в коде и как сделать, чтобы спойлер закрывался строго по закладке закрыть, он закрывается при нажатии в любом месте? СпасибоЭто реализовано средствами CSS, через псевдокласс :focus . Чтобы спойлер закрывался строго по закладке закрыть, надо искать другое решение.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.04.2013, 20:31
    #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, 21:14
    #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:43
    #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, 22:04
    #38215677
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Несколько спойлеров
skyANA, СПАСИБО!!!!!
окейно, въехал, осталось непонятно как сделать с переходом на другую строку, типа

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

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


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


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