Как закрыть предыдущий блок при открытии нового?

Question

Макар

javascript

Как закрыть предыдущий блок при открытии нового?

Как реализовать механизм, при котором, когда один блок открыт, все остальные автоматически закрываются, так что в любой момент времени может быть открыт только один блок? <br/>

20 ноября 2024 г. 4:23

Ответы на вопрос 1

Похожие вопросы

Answer 1

Чтобы реализовать механизм, при котором можно открывать только один блок, а остальные автоматически закрываются, можно использовать JavaScript вместе с HTML и CSS. Ниже приведен пример реализации такого функционала с использованием простого HTML и JavaScript.

### HTML
```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Аккордеон</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">Блок 1</div>
        <div class="accordion-content">Содержимое блока 1</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">Блок 2</div>
        <div class="accordion-content">Содержимое блока 2</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">Блок 3</div>
        <div class="accordion-content">Содержимое блока 3</div>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>
```

### CSS (styles.css)
```css
.accordion {
    width: 100%;
    max-width: 600px;
    margin: auto;
}

.accordion-item {
    border: 1px solid #ccc;
    margin: 5px 0;
}

.accordion-header {
    background: #f1f1f1;
    padding: 15px;
    cursor: pointer;
}

.accordion-content {
    display: none;
    padding: 15px;
    border-top: 1px solid #ccc;
}
```

### JavaScript (script.js)
```javascript
function toggleAccordion(header) {
    // Получаем все элементы содержимого аккордеона
    const allContents = document.querySelectorAll('.accordion-content');

    // Закрываем все блоки
    allContents.forEach(content => {
        content.style.display = 'none';
    });

    // Открываем только тот блок, который был нажат
    const content = header.nextElementSibling;
    if (content.style.display === 'none' || content.style.display === '') {
        content.style.display = 'block';
    } else {
        content.style.display = 'none';
    }
}

// Установим начальное состояние, чтобы все блоки были закрыты
document.querySelectorAll('.accordion-content').forEach(content => {
    content.style.display = 'none';
});
```

### Объяснение:

1. **HTML** - Создается структура аккордеона с заголовками и содержимым для трех блоков.
2. **CSS** - Стилизация аккордеона для улучшения внешнего вида.
3. **JavaScript**:
   - Функция `toggleAccordion` открывает или закрывает выделенный блок.
   - При нажатии на заголовок (кнопку аккордеона) сначала скрываются все открытые блоки, а затем открывается только содержимое блока, соответствующего нажатому заголовку.
   - В начале скрипта устанавливается состояние, в котором все блоки закрыты.

С помощью этого кода вы можете создать аккордеон, в котором в любой момент времени может быть открыт только один блок.