Разберем оба ваших вопроса по порядку:
### Вопрос 1: Закрытие предыдущего `div` при открытии нового
Для того чтобы при открытии одного `div` автоматически закрывался предыдущий, вам нужно использовать JavaScript. Один из подходов — это добавить обработчик события клика на все ваши `div`. При каждом клике вы будете скрывать все `div`, а затем показывать только тот, на который кликнули.
Вот пример кода, как это можно реализовать:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Divs</title>
<style>
.content {
display: none; /* Скрываем все div по умолчанию */
}
</style>
</head>
<body>
<div id="x" class="toggle">Div 1</div>
<div id="content1" class="content">Содержимое 1</div>
<div id="x" class="toggle">Div 2</div>
<div id="content2" class="content">Содержимое 2</div>
<div id="x" class="toggle">Div 3</div>
<div id="content3" class="content">Содержимое 3</div>
<script>
const toggles = document.querySelectorAll('.toggle');
const contents = document.querySelectorAll('.content');
toggles.forEach((toggle, index) => {
toggle.addEventListener('click', () => {
// Скрываем все содержимое
contents.forEach(content => {
content.style.display = 'none';
});
// Показываем текущее содержимое
const currentContent = contents[index];
currentContent.style.display = (currentContent.style.display === 'block') ? 'none' : 'block';
});
});
</script>
</body>
</html>
```
### Вопрос 2: Изменение или удаление `id` для свёрнутых `div`
С точки зрения семантики HTML, использование одинаковых `id` не является хорошей практикой, так как `id` должен быть уникальным на странице. Вместо этого рекомендуется использовать `class` атрибут. Таким образом, если вы хотите "отключить" взаимодействие для свёрнутых `div`, вы можете использовать `class` для управления состоянием вашего `div` и модифицировать ваше JavaScript.
Пример:
```html
<style>
.disabled {
pointer-events: none; /* Отключение кликов */
opacity: 0.5; /* Обесцвечивание */
}
</style>
```
В JavaScript добавьте код для управления классами:
```javascript
toggles.forEach((toggle, index) => {
toggle.addEventListener('click', () => {
// Скрываем все содержимое и отключаем их
contents.forEach(content => {
content.style.display = 'none';
content.classList.add('disabled'); // Добавляем класс при скрытии
});
// Показываем текущее содержимое и включаем его
const currentContent = contents[index];
currentContent.style.display = 'block';
currentContent.classList.remove('disabled'); // Убираем класс при показе
});
});
```
### Итог
1. Чтобы реализовать автоматическое сворачивание, используйте события клика и управляйте отображением `div`.
2. Лучше использовать `class` вместо одинаковых `id` и применять управление классами для изменения их состояния.