Создать ответ 
Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
Автор Сообщение
dlcdcc Не на форуме
Ефрейтор
*

Сообщений: 13
У нас с: May 2015
Сообщение: #1
Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
Здравствуйте, есть уже готовый скрипт спойлера, как сделать чтобы скрипт спойлера с классом=1, 2, 3, 4, 5 - открывался по нажатию кнопок вверху страницы, и закрывался если нажимают на кнопку следующего спойлера из перечисленных вверху классов?
Помогите пожалуйста изменить скрипт под эти функции , сам не могу, не владею ява скриптом.

Вот скрипт который уже есть:
Код:
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
    if ($(this).next('.spoiler_body').css("display")=="none") {
    $('.spoiler_body').hide('normal');
    $(this).next('.spoiler_body').toggle('normal');
}
else $('.spoiler_body').hide('normal');
return false;
});
});
</script>
21.05.2015 13:15:49
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #2
RE: Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
Из Вашего сообщения не совсем понял, что конкретно нужно делать.

Давайте по порядку.
1) Что означает спойлер с классом=1, 2, 3, 4, 5? Это пять классов у одного спойлера или пять одинаковых спойлеров.
2) Должно быть пять заголовков в строку?
3) Содержимое всех спойлеров должно открываться в одном месте или в разных?
4) Содержимое спойлера находится под спойлером или в каком-то другом месте?
5) Одновременно должно быть видно содержимое только одного спойлера?

Скрипт Несколько спойлеров в одну строку смотрели? Может он подойдет?
21.05.2015 20:21:28
Найти все сообщения Цитировать это сообщение
dlcdcc Не на форуме
Ефрейтор
*

Сообщений: 13
У нас с: May 2015
Сообщение: #3
RE: Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
(21.05.2015 20:21:28)Admin писал(а):  Из Вашего сообщения не совсем понял, что конкретно нужно делать.

Давайте по порядку.
1) Что означает спойлер с классом=1, 2, 3, 4, 5? Это пять классов у одного спойлера или пять одинаковых спойлеров.
2) Должно быть пять заголовков в строку?
3) Содержимое всех спойлеров должно открываться в одном месте или в разных?
4) Содержимое спойлера находится под спойлером или в каком-то другом месте?
5) Одновременно должно быть видно содержимое только одного спойлера?

Скрипт Несколько спойлеров в одну строку смотрели? Может он подойдет?

1) Это может быть один спойлер с вложенными в него <div> контейнерами у которых свое отличное от другого <id или name> чтобы кнопка открывала нужный контейнер при нажатии , чтобы их было на 5 разных имен Id.

Или если в одном спойлере разные контейнеры с именами ID проблематично, могут быть 5 разных спойлеров у каждого свой класс, для работы кнопок.

2) В строку должны быть кнопки открывающие каждый свой ID или имя div контейнера. Чтобы кнопки можно было ставить не рядом со спойлером.
3) Спойлеры должны открываться в том месте, где будут установлены.
4) Содержимое находится под спойлером, точнее находится заключенное внутрь спойлер контейнера.
5) При нажатии на кнопку из расположенных в строку, должно поочередно открываться только одно окно спойлера, остальные закрываться, (но это поочередное открывание должно относиться только к определенным ID именам (классам спойлеров)), а не ко всем спойлерам находящимся на странице. Так же должна быть возможность открыть все спойлеры (входящие в поочередное отрывание) и закрыть их - при необходимости.

Постарался пояснить Smile
21.05.2015 21:54:29
Найти все сообщения Цитировать это сообщение
dlcdcc Не на форуме
Ефрейтор
*

Сообщений: 13
У нас с: May 2015
Сообщение: #4
RE: Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
(21.05.2015 20:21:28)Admin писал(а):  Из Вашего сообщения не совсем понял, что конкретно нужно делать.
Скрипт Несколько спойлеров в одну строку смотрели? Может он подойдет?

Действие сполеров не то, что необходимо. И принцип открывания не тот, как я понял.
(Последний раз сообщение было отредактировано 22.05.2015 в 00:29:18, отредактировал пользователь dlcdcc.)
22.05.2015 00:28:41
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #5
RE: Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
Вот что получилось:
Код:
<style type="text/css">
.spoiler_body { display:none; font-style:italic; }
.spoiler_links { float:left; margin:3px; cursor:pointer; font-weight:bold; text-decoration:underline; color:#000099;}
</style>

<div class="spoiler_links" id="sp_1">Заголовок спойлера №1</div>
<div class="spoiler_links" id="sp_2">Заголовок спойлера №2</div>
<div class="spoiler_links" id="sp_3">Заголовок спойлера №3</div>
<div class="spoiler_links" id="sp_4">Заголовок спойлера №4</div>
<div style="clear:both;"></div>

<p>Произвольный текст.</p>
<div class="spoiler_body" id="body_sp_4">
4.<br>Текст четвертого спойлера!<br>
Может располагаться первым!
</div>

<p>Между спойлерами может быть произвольный текст.</p>

<div class="spoiler_body" id="body_sp_1">
1.<br>Текст под спойлером<br>
имеет класс spoiler_body.
</div>

<p>И еще текст.</p>

<div class="spoiler_body" id="body_sp_3">
3.<br>А это уже текст третьего спойлера!<br>
Данный спойлер также позволяет скрывать<br>
излишнее на сайте!
</div>

<div class="spoiler_body" id="body_sp_2">
2.<br>Текст второго спойлера!<br>
Располагается после третьего!
</div>

<input type="button" value="Закрыть все" onclick=$('.spoiler_body').hide('normal')>
<input type="button" value="Открыть все" onclick=$('.spoiler_body').show('normal')>


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
    sp_id="#body_"+$(this).attr("id");
    if ($(sp_id).css("display")=="none") {
    $('.spoiler_body').hide('normal');
    $(sp_id).toggle('normal');
}
else $('.spoiler_body').hide('normal');
return false;
});
});
</script>

Содержимое спойлеров можно располагать в любом месте на страничке и не обязательно по порядку.
Заголовку спойлера с id="sp_1" должен соответствовать DIV контейнер с id="body_sp_1" и т.д.
23.05.2015 20:05:36
Найти все сообщения Цитировать это сообщение
dlcdcc Не на форуме
Ефрейтор
*

Сообщений: 13
У нас с: May 2015
Сообщение: #6
RE: Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
Спасибо большое, уже близко, но получается, что нажав еще раз на тот же заголовок, которым открыл спойлер, спойлер закрывается, а хотелось бы, чтобы спойлер закрывался только нажатием на другой спойлер, не на тот же. Smile

Может как решение, сделать кнопки которые только дают команду открыть спойлер конкретный? Blush У меня не получилось сделать такую кнопку...
24.05.2015 01:55:04
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #7
RE: Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
Замените JavaScript код на такой:
Код:
$(document).ready(function(){
$('.spoiler_links').click(function(){
    sp_id="#body_"+$(this).attr("id");
    if ($(sp_id).css("display")=="none") {
        $('.spoiler_body').hide('normal');
        $(sp_id).show('normal');
    }
    return false;
});
});
24.05.2015 21:55:19
Найти все сообщения Цитировать это сообщение
dlcdcc Не на форуме
Ефрейтор
*

Сообщений: 13
У нас с: May 2015
Сообщение: #8
RE: Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
(24.05.2015 21:55:19)Admin писал(а):  Замените JavaScript код на такой:
Код:
$(document).ready(function(){
$('.spoiler_links').click(function(){
    sp_id="#body_"+$(this).attr("id");
    if ($(sp_id).css("display")=="none") {
        $('.spoiler_body').hide('normal');
        $(sp_id).show('normal');
    }
    return false;
});
});

СПАСИБО БОЛЬШОЕ - это то, что нужно. HappySmile
25.05.2015 00:28:16
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #9
RE: Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
Сделал еще один вариант данного скрипта с небольшими изменениями. Изменения заключаются в том, что после клика по ссылке "Открыть" она меняется на "Закрыть" и наоборот.

Код:
<style type="text/css">
.spoiler_body { display:none; font-style:italic; }
.spoiler_links { cursor:pointer; font-weight:bold; text-decoration:underline; color:#000099;}
</style>

<div class="spoiler_links" id="sp_1">Открыть</div>
<div class="spoiler_links" id="sp_2">Открыть</div>
<div class="spoiler_links" id="sp_3">Открыть</div>
<div class="spoiler_links" id="sp_4">Открыть</div>
<div style="clear:both;"></div>

<p>Произвольный текст.</p>
<div class="spoiler_body" id="body_sp_4">
4.<br>Текст четвертого спойлера!<br>
Может располагаться первым!
</div>

<p>Между спойлерами может быть произвольный текст.</p>

<div class="spoiler_body" id="body_sp_1">
1.<br>Текст под спойлером<br>
имеет класс spoiler_body.
</div>

<p>И еще текст.</p>

<div class="spoiler_body" id="body_sp_3">
3.<br>А это уже текст третьего спойлера!<br>
Данный спойлер также позволяет скрывать<br>
излишнее на сайте!
</div>

<div class="spoiler_body" id="body_sp_2">
2.<br>Текст второго спойлера!<br>
Располагается после третьего!
</div>

<input type="button" value="Закрыть все" onclick=$('.spoiler_body').hide('normal')>
<input type="button" value="Открыть все" onclick=$('.spoiler_body').show('normal')>


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
    sp_id="#body_"+$(this).attr("id");
    $('.spoiler_links').text('Открыть');
    if ($(sp_id).css("display")=="none") {
        $(this).text('Закрыть');
        $('.spoiler_body').hide('normal');
        $(sp_id).toggle('normal');
    }
    else $('.spoiler_body').hide('normal');
return false;
});
});
</script>
06.06.2015 19:50:54
Найти все сообщения Цитировать это сообщение
dlcdcc Не на форуме
Ефрейтор
*

Сообщений: 13
У нас с: May 2015
Сообщение: #10
RE: Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху
Думаю, такой вариант тоже может пригодиться.
Спасибо!
14.06.2015 17:09:20
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)



Mail.ru LiveInternet

© Copyright 2011-2016 by UsefulScript.ru