Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
// Дождемся загрузки DOM
document.addEventListener('DOMContentLoaded', function() {
// Получаем все элементы, которые будут служить переключателями
var toggles = document.querySelectorAll('.section-toggle');
// Перебираем каждый переключатель
for (var i = 0; i < toggles.length; i++) {
toggles[i].addEventListener('click', function() {
// 'this' здесь ссылается на текущий кликнутый элемент (section-toggle)
var currentToggle = this;
// Находим следующий соседний элемент, который является collapsible-content
// (это может быть recipe-block или section-content)
var content = currentToggle.nextElementSibling;
// Если найден следующий элемент и он имеет класс 'collapsible-content'
if (content && content.classList.contains('collapsible-content')) {
// Проверяем, свернут ли блок в данный момент
if (content.classList.contains('collapsed')) {
// Если свернут, разворачиваем его
content.classList.remove('collapsed');
} else {
// Если развернут, сворачиваем его
content.classList.add('collapsed');
}
}
});
}
// Изначально сворачиваем все блоки с рецептами и эффектами
// Это важно, чтобы они были свернуты при первой загрузке страницы
var collapsibleBlocks = document.querySelectorAll('.collapsible-content');
for (var j = 0; j < collapsibleBlocks.length; j++) {
// Добавляем класс 'collapsed' при загрузке страницы
collapsibleBlocks[j].classList.add('collapsed');
}
});
console.log('Привет я работаю');