Скрипт спойлера с классом=1, 2, 3, 4, 5 - открывающихся по нажатию кнопок вверху

[dlcdcc]

Здравствуйте, есть уже готовый скрипт спойлера, как сделать чтобы скрипт спойлера с классом=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>

[Admin]

Из Вашего сообщения не совсем понял, что конкретно нужно делать.

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

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

[dlcdcc]

(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 именам (классам спойлеров)), а не ко всем спойлерам находящимся на странице. Так же должна быть возможность открыть все спойлеры (входящие в поочередное отрывание) и закрыть их - при необходимости.

Постарался пояснить

[dlcdcc]

(21.05.2015 20:21:28)Admin писал(а):  Из Вашего сообщения не совсем понял, что конкретно нужно делать.
Скрипт Несколько спойлеров в одну строку смотрели? Может он подойдет?

Действие сполеров не то, что необходимо. И принцип открывания не тот, как я понял.

[Admin]

Вот что получилось:

Код:

<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" и т.д.

[dlcdcc]

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

Может как решение, сделать кнопки которые только дают команду открыть спойлер конкретный? У меня не получилось сделать такую кнопку...

[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;
});
});

[dlcdcc]

(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;
});
});

СПАСИБО БОЛЬШОЕ - это то, что нужно.

[Admin]

Сделал еще один вариант данного скрипта с небольшими изменениями. Изменения заключаются в том, что после клика по ссылке "Открыть" она меняется на "Закрыть" и наоборот.

Код:

<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>

[dlcdcc]

Думаю, такой вариант тоже может пригодиться.
Спасибо!