Несколько открывающихся дивов (спойлеров)

[Crushtest]

Планирую сделать очень большую страницу с большим количеством открывающихся и закрывающихся дивов.
Т.е. будет карта, на которой будут кликабельные элементы, при нажатии на них на карте отрывается картинка с путем, а сбоку в отдельном диве (списком) - инфо по нему.
И соответственно, надо как-то отделить один от другого. Т.е. я так понимаю, что он открывает следующий после него в коде див с классом spoiler_body - но это общее.
Все работает, если их подряд писать, а если код будет идти не подряд? Я надеюсь, все правильно попытался объяснить :-)

Другими словами, мне надо по клику на каждый спойлер_линк открывать по два дива.

[Admin]

Да хоть десять

Нечто подобное уже было сделано в теме Показ/скрытие большого количества спойлеров.
Так что практически готовый код взял оттуда и немного доработал (уменьшил) под Вашу задачу:

Код:

<style type="text/css">
.selected { background-color:#CCCCCC; }
.sp_body { display:none; font-style:italic; border:1px solid #0033FF;}
.sp_links { width:230px; text-align:center; cursor:pointer; font-weight:bold;
text-decoration:underline; color:#0000FF; margin:5px; border:1px solid #808080; }
</style>


<div class="sp_links" id="sp_aaa">Открыть все AAA</div>
<div class="sp_links" id="sp_bbb">Открыть все BBB</div>
<div class="sp_links" id="sp_ccc">Открыть все CCC</div>

<div class="body_aaa sp_body">Текст AAA_1</div>
<div class="body_aaa sp_body">Текст AAA_2</div>
<div class="body_bbb sp_body">Текст BBB_1</div>
<div class="body_bbb sp_body">Текст BBB_2</div>
<div class="body_ccc sp_body">Текст CCC_1</div>
<div class="body_aaa sp_body">Текст AAA_3</div>
<div class="body_ccc sp_body">Текст CCC_2</div>
<div class="body_ccc sp_body">Текст CCC_3</div>
<div class="body_ccc sp_body">Текст CCC_4</div>
<div class="body_aaa sp_body">Текст AAA_4</div>
<div class="body_aaa sp_body">Текст AAA_5</div>

<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(){
$('.sp_links').click(function(){
  cat=$(this).attr("id").substr(2);
  if ($(this).hasClass("selected")!=true) {
   $('.sp_body').slideUp('normal');
   $('.body'+cat).slideDown('normal');
  }
  $('.sp_links').removeClass('selected');
  $(this).addClass('selected');
  return false;
});
});
</script>

Аналогичное Ваше сообщение в теме Обновленный скрипт спойлера с плавным открытием и скрытием содержимого публиковать не стал.

[Crushtest]

Вы прямо спаситель! :-)
А можно закрывать по повторному клику? :-)
И кнопку открыть-закрыть все? У меня они просто все разные - но у каждого по два дива. Но чтобы можно было посмотреть - открыть все? :-)

[Admin]

Держите:

Код:

<style type="text/css">
.selected { background-color:#CCCCCC; }
.sp_body { display:none; font-style:italic; border:1px solid #0033FF;}
.sp_links { width:230px; text-align:center; cursor:pointer; font-weight:bold;
text-decoration:underline; color:#0000FF; margin:5px; border:1px solid #808080; }
</style>


<div class="sp_links" id="sp">Показать/скрыть все</div>
<div class="sp_links" id="sp_aaa">Открыть все AAA</div>
<div class="sp_links" id="sp_bbb">Открыть все BBB</div>
<div class="sp_links" id="sp_ccc">Открыть все CCC</div>

<div class="body_aaa sp_body">Текст AAA_1</div>
<div class="body_aaa sp_body">Текст AAA_2</div>
<div class="body_bbb sp_body">Текст BBB_1</div>
<div class="body_bbb sp_body">Текст BBB_2</div>
<div class="body_ccc sp_body">Текст CCC_1</div>
<div class="body_aaa sp_body">Текст AAA_3</div>
<div class="body_ccc sp_body">Текст CCC_2</div>
<div class="body_ccc sp_body">Текст CCC_3</div>
<div class="body_ccc sp_body">Текст CCC_4</div>
<div class="body_aaa sp_body">Текст AAA_4</div>
<div class="body_aaa sp_body">Текст AAA_5</div>

<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(){
$('.sp_links').click(function(){
  cat=$(this).attr("id").substr(2);
  select=$(this).hasClass("selected");
  $('.sp_links').removeClass('selected');
  $('.sp_body').slideUp('normal');
  if (select!=true) {
   if (cat=='') $('.sp_body').slideDown('normal');
   else $('.body'+cat).slideDown('normal');
   $(this).addClass('selected');
  }
  else $('.body'+cat).slideUp('normal');
  return false;
});
});
</script>

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