Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
Dendikot
0 / 0 / 0
Регистрация: 19.05.2013
Сообщений: 3
#1

Скрытие спойлеров

19.05.2013, 19:19. Просмотров 1293. Ответов 5
Метки нет (Все метки)

Необходимо сделать несколько спойлеров в которых бы работала следующая функция. Допустим у нас есть 7 спойлеров, при нажатии на один из них показывалась текстовая информация, но если пользователь нажал на другой спойлер то информация в пред идущем скрывалась бы.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.05.2013, 19:19
Ответы с готовыми решениями:

Скрытие элемента на странице
Добрый день. Пытаюсь убрать горизонтальные линии с шаблона страницы, но не...

Скрытие ссылки на сайте
Здравствуйте, подскажите пожалуйста как скрыть ссылку так, что бы роботы ее...

Скрытие хтмл кода
Здрасьте, всех с наступившим! Ну вообщем тема старая, но так как ответа не...

Скрытие/показ right_sidebar
уважаемые, подскажите возможно ли сделать такое в блочной верстке: имеем...

Скрытие данных веб-страницы
Добрый день! Есть адрес http://www.komcity.ru/announcement/?iddiv=2&idrub=230 -...

5
7Lexus
3 / 3 / 0
Регистрация: 10.09.2012
Сообщений: 25
20.05.2013, 06:20 #2
К таким спойлерам применительно название "аккордеон".

...ну если как пример можете посмотреть вот это

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
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<div class="spoiler closed">
    <div class="title"><h3 class="title_h3"><span1>12.03.2013</span1> - Офигительная новость дня!</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Не поверишь пока не прочтешь!</div>
</div>
 
<div class="spoiler closed">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №2</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера</div>
</div>
 
<div class="spoiler closed">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №3</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера</div>
</div>
 
<div class="spoiler closed">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №4</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера</div>
</div>
 
<div class="spoiler closed">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №5</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера</div>
</div>
 
<div class="spoiler closed">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №6</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера</div>
</div>
 
<div class="spoiler closed">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №7</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера</div>
</div>
 
<div class="spoiler closed">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №8</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера</div>
</div>
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
.spoiler {
font-family:verdana,serif;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid #bbbbbb;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -webkit-box-shadow: 0 0 9px #dddddd inset;
    -moz-box-shadow: 0 0 9px #dddddd inset;
    box-shadow: 0 0 9px #dddddd inset;
}
 
.title_h3 {
    cursor:pointer;
font-size:10pt;
    background: #FAFAD2;
    margin: 0 -10px 0 -10px;
    padding-left: 15px;
    padding-right: 100px;
    border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    -webkit-border-radius: 7px 7px 0 0;
    -webkit-box-shadow: 0 0 9px #dddddd inset;
    -moz-box-shadow: 0 0 9px #dddddd inset;
    box-shadow: 0 0 9px #dddddd inset;
}
.closed .contents { display:none; }
.closed h3 { background: #FAFAD2; }
 
.contents { padding: 10px; font-size:14px;
background:ebf1f4;}
 
.open_close {
width:70;
    display: block;
    position: absolute;
    right: 15px;
    top: 2px;
    font-size:12px;
color:#fff;
text-align: center;
    background: #44809a;
    cursor: pointer;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
span1 {margin-left: 10px;color:red;}
 
</style>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(".closed").toggleClass("show").children(".title").children(".open_close").text('Открыть');
 
$(".title").click(function(){
if ($(this).parent().hasClass("show")) {
    $("div.spoiler").addClass("show").children(".contents").hide("medium");
    $("div.spoiler").children(".title").children(".title_h3").css("background","#FAFAD2").parent().children(".open_close").text('Открыть');
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background","#d8e3e7").parent().children(".open_close").text('Закрыть');
    }
 
else {
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background","#FAFAD2").parent().children(".open_close").text('Открыть');
    }
});


или такое без JavaScript

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
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
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;
    float: left;
    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;
}
2
Dendikot
0 / 0 / 0
Регистрация: 19.05.2013
Сообщений: 3
20.05.2013, 22:40  [ТС] #3
Спасибо огромное очень помогло!
0
7Lexus
3 / 3 / 0
Регистрация: 10.09.2012
Сообщений: 25
21.05.2013, 05:21 #4
Dendikot,
в первом варианте, если нужно чтобы какой-то элемент был сразу открыт при загрузки странички - поменяйте <div class="spoiler closed"> на <div class="spoiler">
во втором варианте, если нужно чтобы элементы располагались друг под другом уберите в секции .open "float:left" (решение было подсказано на этом форуме)
0
Dendikot
0 / 0 / 0
Регистрация: 19.05.2013
Сообщений: 3
21.05.2013, 21:08  [ТС] #5
Появилась проблема, все работает, но при изменении в html документе содержания спойлера он становиться пустым.

Добавлено через 13 минут
Проблему решил, просто код изменял не на своем компе а непосредственно на сайте данном вами, хотя в чем проблемы в изменении на моем пк так и не понял.

Добавлено через 9 минут
А нет, все таже проблема при смене текста и вставке в код так же белое поле
0
7Lexus
3 / 3 / 0
Регистрация: 10.09.2012
Сообщений: 25
22.05.2013, 05:21 #6
Dendikot,
Честно говоря - странная ситуация. Занимаюсь модерацией сайта практически ежедневно, использую разные приемы в том числе и указанные в этой теме. Ничего подобного нет.
Проверьте хорошо, может меняя один текст на другой нечаянно удаляете часть кода?
0
22.05.2013, 05:21
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.05.2013, 05:21

Скрытие стрелки списка <select>
Как скрыть стрелку списка select, но так что бы она оставалась активной при...

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

появление/скрытие блока div
Подскажите как сделать появление/скрытие блока div при нажатие на кнопку у...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru