Как сделать больше одного спойлера, помoмогите подправить JS?

Question

[Капитан Какао]

Есть несколько спойлеров, конкретно в примере 2.
Нужно что бы они открывались по отдельности (сейчас при клике на один, открываются все)

Answer 1

[Николай]

Проблема в том, что селектор $('.spoiler_toggle') находит оба спойлера, а вам нужно найти только тот на который кликнули. Проще всего добавить в селектор второй параметр, который будет являться контекстом (областью поиска). В данном случае $this.parent() это блок <div></div> в который обёрнут спойлер.
Результат будет такой:

$('.spoiler_toggle',$(this).parent()).slideToggle(0, 
             function() {
             	var visible = $(this).is(':visible');
             	$('.spoiler_indicator', $(this).parent()).html(visible ? 'Закрыть' : 'Открыть');
         	}
         );

Comments

[Капитан Какао]

За пояснение отдельное спасибо)
Ещё кстати нужно было добавить $(this).parent() к .spoiler_indicator, что бы надпись закрыть/открыть менялась только у того спойлера который нужен.

Answer 2

[Владимир Ио]

Вот более правильный вариант, позволяющий работать и с вложенностью в общий родительский контейнер(div). То есть можете теперь строчить их подряд, главное чтобы spoiler_toggleбыл перед "своим" spoiler_indicator.

$(document).ready(function () {
    $('.spoiler_indicator').click(function () {
        var indicator = $(this);
        var toggle = $(this).prev('.spoiler_toggle');

        if (toggle.is(':visible')) {
            toggle.hide(0);
            indicator.html('Открыть');
        } else {
            toggle.show(0);
            indicator.html('Закрыть');
        }

    });
});

https://jsfiddle.net/kf8nme8e/

Comments

[Капитан Какао]

Спасибо, ваш вариант интересней, но в итоге функций спойлера не хватило, так как нужно один элемент скрывать, другой открывть (другими словами заменять)
Реализовал это так:
jsfiddle.net/9yz2jowg/1

Но как и в прошлый раз возникла проблема с тем, что при клики на один "спойлер", открываются все.
Тогда попробовал искать в родителе, но что-то не помогло)
jsfiddle.net/9yz2jowg

Может подскажите, как правильно разделить их? Что бы на какой кликаешь, тот и открывается.

[Владимир Ио]

Rad Cor: Так? https://jsfiddle.net/sf1m5kag/

[Капитан Какао]

Владимир Ионов: Да, то, что нужно!) Спасибо.