Несколько спойлеров на одной странице?

Question

[Сергей Миллер]

Всем привет!
На странице имеются около 10 спойлеров, но при клики на один из них раскрываются все.

$('.list_title').click(function(){
$('.list_content').slideToggle();
$('.listBgArr').toggleClass('uppArrow');});

<div class="list_title pads_left list1">Тайтл куда кликаем<div class="listBgArr"></div>
<div class="list_content pads_left">
<span>&bull; <a href="uglovie-dushevie-kabini.php">Пункт 1</a></span>
<span>&bull; <a href="pryamie-dushevie-kabini.php">Пункт 2</a></span>
<span>&bull; <a href="molirovannie-dushevie.php">Пункт 3</a></span></div></div>
<div class="list_title pads_left list2">Тайтл куда кликаем<div class="listBgArr"></div>
<div class="list_content pads_left">
<span>&bull; <a href="lestnichnie-ograzshdeniya.php">Пункт 1</a></span>
<span>&bull; <a href="balkonnie-ograzshdeniya.php">Пункт 2</a></span>
<span>&bull; <a href="dushevie-ograzshdeniya.php">Пункт 3</a></span>
<span>&bull; <a href="ograzshdeniya-vtorogo-sveta.php">Пункт 4</a></span></div></div>

Как решить эту проблему? Чтобы открывался только тот div на который кликнули. Пожалуйста, помогите разобраться.

Comments

[Егор Живагин]

А вы реально так разметку форматируете или это просто сюда вставилось так?)

[Сергей Миллер]

Егор Живагин, Что конкретнее имеете в виду?

[Егор Живагин]

Сергей Миллер, ну, отступы и конструкции вида:

<div>
<div>
<div>
<span></span>
<span></span></div></div></div>

[Сергей Миллер]

Егор Живагин, а не, это просто на скорую руку для демонстрации примера.

[Егор Живагин]

Сергей Миллер, фух)

Answer 1

[Владимир Скибин]

$('.list_title').on('click', function(){
  $(this).next('.list_content').slideToggle();
  $(this).find('.listBgArr').toggleClass('uppArrow');
});

Comments

[Сергей Миллер]

Спасибо, огромное. Ваш вариант самый практичный

Answer 2

[Егор Живагин]

$('.list_title').click(function(){
    var current = $(this).data('index');
    $('.list_content[data-index="' +current+ '"]').slideToggle();
$(this).children('.listBgArr').toggleClass('uppArrow');});

<div class="list_title pads_left list1" data-index="1">Тайтл куда кликаем<div class="listBgArr"></div>
<div class="list_content pads_left" data-index="1">
<span>&bull; <a href="uglovie-dushevie-kabini.php">Пункт 1</a></span>
<span>&bull; <a href="pryamie-dushevie-kabini.php">Пункт 2</a></span>
<span>&bull; <a href="molirovannie-dushevie.php">Пункт 3</a></span></div></div>
<div class="list_title pads_left list2" data-index="2">Тайтл куда кликаем<div class="listBgArr"></div>
<div class="list_content pads_left" data-index="2">
<span>&bull; <a href="lestnichnie-ograzshdeniya.php">Пункт 1</a></span>
<span>&bull; <a href="balkonnie-ograzshdeniya.php">Пункт 2</a></span>
<span>&bull; <a href="dushevie-ograzshdeniya.php">Пункт 3</a></span>
<span>&bull; <a href="ograzshdeniya-vtorogo-sveta.php">Пункт 4</a></span></div></div>