Раскрывающий список со своим контентом

[dzho]

Всем привет.

Как лучше сделать раскрывающий список. Пока есть идея только с повторяющим кодом. Т.е создать несколько классов и везде им написать свой код.

Хочу сделать при клике на кнопку каждый блок со своим контентом раскрывал контент.

Так же плюсик он сейчас минус становился при клике.

Вот моя демка с кодом.
http://codepen.io/dzheysen/pen/dpWzbK

Спасибо.

[Diphenyl Oxalate]

Есть же готовое решение https://jqueryui.com/accordion/

[dzho]

Да оно весит очень много.

[ruslan_mart]

.spolier:not(.spoiler-opened) .spolier_content {
    display: none;
}

<div class="spoiler">
    <div class="spoiler_title">SPOILER</div>
    <div class="spoiler_content">Content</div>
</div>

<div class="spoiler">
    <div class="spoiler_title">SPOILER</div>
    <div class="spoiler_content">Content</div>
</div>

<div class="spoiler">
    <div class="spoiler_title">SPOILER</div>
    <div class="spoiler_content">Content</div>
</div>

$('.spoiler_title').click(function() {
   $(this.parentNode).toggleClass('spoiler-opened');
});

[рони]

dzho,
форум - поиск - открывашка

[Diphenyl Oxalate]

Да оно весит очень много.

Вот сейчас специально посмотрел, аккордеон отдельно весит 17кб. Не так уж и много, раз всё равно используете jQuery.