Как сделать что-бы действие применялось только в том блоке, где находятся кнопки и изменялось js в зависимости от размера экрана?

Question

[prokopn]

Как сделать что-бы действие переключения применялось только в том блоке, где находятся кнопки? Так-же до 768px клик идет по переключателю, после 768px клик идет на заголовки, как сделать что-бы код js переходил в это состояние без перезагрузки страницы?

Comments

[Ankhena]

Как сделать что-бы действие переключения применялось только в том блоке, где находятся кнопки?

https://learn.javascript.ru/dom-navigation

Так-же до 768px клик идет по переключателю, после 768px клик идет на заголовки, как сделать что-бы код js переходил в это состояние без перезагрузки страницы?

https://developer.mozilla.org/ru/docs/Web/API/Wind...

Либо на CSS, предварительно использовав нормальные теги.
https://developer.mozilla.org/ru/docs/Web/CSS/poin...

Только зачем заставлять пользователя страдать и попадать обязательно в переключатель?

[ksnk]

Во первых, ставить обработчик события, в вызове функции resize не снимая его - это даже не ошибка, а преступление )
Насколько я понял - нужно чтобы
- при клике на заголовке (при любом разрешении экрана) переключался нужный контент и отмечался заголовок
- при клике на переключатель (при любом разрешении экрана) переключался нужный контент и переключались нужные заголовки

Так что особо следить за разрешением не нужно, нужно один раз поставить обработчики событий. Если по каким-то религиозным соображениям не нужно реагировать на клик по заголовку на "широком экране" - можно в обработчике игнорировать.
Скрываться-показываться переключатель будет сам, посредством css.
Никакого обработчика ресайза не нужно.

Чтобы найти в обработчике клика нужный блок - нужно помнить, что e.target указывает на элемент, который непосредственно кликнули, и двигаясь вверх по родительским элементам его можно обнаружить. Что-то вроде

function nearest(el, sel) {
    while (el && !(el.matches(el,sel))) {el = el.parentElement};
    return el;
}

... .addEventListener("click", function (e) {
 let block=nearest(e.target,'.toggle'),
     content_1=block.querySelector('.toggle-content[data-id="1"]'),

...
})

[Natalia Baženova]

Прятать/показывать нужные кнопки в зависимости от ширины, с помощью css media