Как сделать что б при клике произошло много событий?

Question

[senaj]

<div class="blog__list">
               <article class="blog__item blog__open">
                  <div class="blog__background-open">
                  </div>
                  <div class="blog__close is-hidden">                  
                  </div>
               </article>
               <article class="blog__item">
                  <div class="blog__background-open is-hidden">                   
                  </div>
                  <div class="blog__close">   
                  </div>
               </article>
               <article class="blog__item">
                  <div class="blog__background-open is-hidden">
                  </div>
                  <div class="blog__close">
                     </div>
               </article>
            </div>

var blogs = document.getElementsByClassName('blog__item');
      for (var i = 0; i < blogs.length; i++) {
         blogs[i].addEventListener('click', function () {
            if (this.classList.contains('blog__open')) {
               return;
            } else {
               this.classList.add('blog__open');
               this.querySelector('.blog__background-open').classList.remove('is-hidden');
               this.querySelector('.blog__close').classList.add('is-hidden');
               this.nextElementSibling.classList.remove('blog__open');
               this.previousElementSibling.classList.remove('blog__open');
            }
         });
      }

вот такой код. я js плохо знаю, так в общих чертах, собрал с миру по нитке. Должно быть так, при клике по <article class="blog__item"> у него проверяется наличие класса blog__open, если он есть ничего не происходит. Если нет то он добавляется, добавляются нужные классы его двум детям, а у всех соседних элементов убирается класс blog__open. Как я понимаю нужен for что б проверить все соседние элементы, я попытался, не получилось, код ниже выложу. Но даже в этом случае последний элемент не воздействует на предыдущего соседа. Второй элемент нормально. Первый на следующий элемент воздействует, а предыдущего у него нет. Элементов <article class="blog__item"> будет больше. Помогите разобраться.
Вот код попытка:

for (var i = 0; i < blogs.length; i++) {
         blogs[i].addEventListener('click', function () {
            if (this.classList.contains('blog__open')) {
               return;
            } else {
               this.classList.add('blog__open');
               this.querySelector('.blog__background-open').classList.remove('is-hidden');
               this.querySelector('.blog__close').classList.add('is-hidden');
               var previousSibling = document.getElementsByClassName('blog__item').previousElementSibling;
               for (var i = 0; i < previousSibling.length; i++) {
                  previousSibling[i].classList.remove('blog__open');
                  previousSibling[i].querySelector('.blog__background-open').classList.add('is-hidden');
                  previousSibling[i].querySelector('.blog__close').classList.remove('is-hidden');
               }
               var nextSibling = document.getElementsByClassName('blog__item').nextElementSibling;
               for (var i = 0; i < nextSibling.length; i++) {
                  nextSibling[i].classList.remove('blog__open');
                  nextSibling[i].querySelector('.blog__background-open').classList.add('is-hidden');
                  nextSibling[i].querySelector('.blog__close').classList.remove('is-hidden');
               }
            }
         })
      }

Тут, кроме выше описанного, должно быть что каждый соседний элемент добавляет своим детям нужные классы. А по факту выполняются только первые три пункта от else.

Comments

[imko]

Ну например сначала собрать коллекцию всех blog__item, на каждый из них повесить обработчик в котором снова проходиться по всей коллекции и убирать у всех open а потом добавлять тому на который кликнут типа

let myItems = document.querySelectorAll("...")
myItems.forEach(item =>{
	item.addEventListener("click", ()=>{
		myItems.forEach(item=>{
			item.classList.remove("open")
		})
		item.classList.add("open")
	})
})

И проверять ничего не придется. Дополнительные манипуляции по желанию) Под рукой и все айтемы и кликнутый

[senaj]

imko, добрый вечер. Повторюсь, я не сведущий в программировании. Попробовал применить ваш код, подставил свои классы, предыдущий код закомитил, но ничего не произошло. Вообще ни как не отреагировал. Как я понял по описанию, он должен был был убрать все классы blog__open, а потом где кликаешь там и ставит. Ну или при клике меняет, если не было то ставит, если есть то убирает по типу toggle. Я подобного достигал кодом похожим на тот что я выложил выше. Всё открывалось, закрывалось, стили менялись. Но мне нужно что б элемент открывался от клика, а закрывался только при клике на другой элемент коллекции.

[imko]

senaj,

он должен был был убрать все классы blog__open, а потом где кликаешь там и ставит.

вот так да.

Попробовал применить ваш код

ну это мало о чем говорит, попробовать применить можно совсем по разному)
https://codepen.io/herr-imko/pen/XWyYjLK Я тут схематично стилизовал ребят для наглядности
Чего не хватает, рассказывайте)

[senaj]

Да всё сработало. Спасибо. И предыдущий код тоже работает. Просто переносил класс со своего кода, а там без точки и я про неё забыл.