Как на js поочерёдно задать класс при клике?

Question

[FrelFrloich]

На jqeury всё понятно, но с помощью нативного js я не могу выцепить элемент поочерёдно из массива, кликая по одной кнопке. Грубо говоря некий аккордеон, с единственной кнопкой .btn, при клике на которую, задаётся поочерёдно класс .selector--show дивам с классом .selector
Вопрос вроде как лёгкий, но к сожалению гугл мне не хочет оказывать помощь в его решении.

пример https://jsfiddle.net/mj29kvht/5/

<button class="btn">Нажать</button>

<div class="selector-container">
    <div class="selector selector--show">Контент</div>
    <div class="selector">Контент</div>
    <div class="selector">Контент</div>
    <div class="selector">Контент</div>
    <div class="selector">Контент</div>
</div>

# пример jquery

$('.btn').click(function () {
        var box = $('.selector:visible')
        $(box).next('.selector').addClass('selector--show')
})

#js шаблон

const btn = document.querySelector('.btn')
const box = document.querySelectorAll('.selector')

Answer 1

[Андрей Мартынкевич]

Добрый вечер, вы такой результат хотите? *ссылка*

Comments

[FrelFrloich]

Спасибо за помощь но нет, https://jsfiddle.net/mj29kvht/5/ вот такого эффекта, я не совсем правильно задал свой вопрос.

[Андрей Мартынкевич]

FrelFrloich, тогда так *ссылка*

[FrelFrloich]

Андрей Мартынкевич, теперь понятно, спасибо. Я отмечу вопрос как решённый.

Answer 2

[Владимир Ясанкин]

Получи коллекцию внутренних div для selector-container. Создай глобальную переменную index=0. В обработчике получи ссылку на объект из коллекции индексом indx++ и делай что хочешь.
Если если indx>размера коллекции index=0.

Comments

[FrelFrloich]

уже разобрался спасибо.