Как правильно открыть/закрыть эти спойлеры?

Question

[new2k19]

код:

<div class="spoiler">
    <div class="spoiler-head">
        <p>Введение</p>
    </div>
    <div class="spoiler-body book-content" id="Введение">
        <div class="spoiler">
            <div class="spoiler-head">
                <p>§ 1. Химия — часть естествознания</p>
            </div>
            <div class="spoiler-body book-content" id="§ 1. Химия — часть естествознания">
                <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a> </div>
        </div>
        <div class="spoiler">
            <div class="spoiler-head">
                <p>§ 2. Предмет химии. Вещества</p>
            </div>
            <div class="spoiler-body book-content" id="§ 2. Предмет химии. Вещества">
                <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a> </div>
        </div>
        <div class="spoiler">
            <div class="spoiler-head">
                <p>§ 3. Превращения веществ. Роль химии в жизни человека</p>
            </div>
            <div class="spoiler-body book-content" id="§ 3. Превращения веществ. Роль химии в жизни человека">
                <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a> </div>
        </div>
        <div class="spoiler">
            <div class="spoiler-head">
                <p>§ 4. Краткий очерк истории развития химии</p>
            </div>
            <div class="spoiler-body book-content" id="§ 4. Краткий очерк истории развития химии">
                <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a> </div>
        </div>
        <div class="spoiler">
            <div class="spoiler-head">
                <p>§ 5. Периодическая система химических элементов Д. И. Менделеева. Знаки химических элементов</p>
            </div>
            <div class="spoiler-body book-content" id="§ 5. Периодическая система химических элементов Д. И. Менделеева. Знаки химических элементов">
                <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a> </div>
        </div>
        <div class="spoiler">
            <div class="spoiler-head">
                <p>§ 6. Химические формулы. Относительная атомная и молекулярная массы</p>
            </div>
            <div class="spoiler-body book-content" id="§ 6. Химические формулы. Относительная атомная и молекулярная массы">
                <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a> </div>
        </div>
    </div>
</div>

js:

$('.spoiler-head').click(function(){$(this).parents('.spoiler').toggleClass("active").find('.spoiler-body').toggle()})

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

Answer 1

[Антон Усачев]

Нужно просто правильно сделать выборку, правильно обратиться к элементу. Пример: