@user_tm

Как по нажатию на одну вкладку, скрыть другие вкладки?

Как по нажатию на <summary>Покажи-скрой меня</summary>, скрыть текст от других <summary>Покажи-скрой меня</summary>?
хорошо бы если на чистом css, но и js тоже можно.

вот код:
<div class="wrapp">
  <details open>
    <summary>Покажи-скрой меня</summary>
    <p>Скандинавская мифология — мифология древних скандинавов, часть древнегерманской мифологии.</p>
</details>
<details >
    <summary>Покажи-скрой меня 2</summary>
    <p><b>Скандинавская мифология</b> — мифология древних скандинавов, часть древнегерманской мифологии.<br>
        Основным источником сведений о ней являются тексты поэтической <b>«Старшей Эдды»</b> и прозаической <b>«Младшей Эдды» С. Стурлусона XII века н. э.</b><br>
        Примерно в то же время датский хронист Саксон Грамматик в <b>«Деяниях датчан»</b> передаёт многие мифологические сюжеты. Ценные сведения о <br>древнегерманской мифологии имеются в <b>«Германии» Тацита</b>.</p>
</details>
<details >
    <summary>Покажи-скрой меня 3</summary>
    <p>Скандинавская мифология — мифология древних скандинавов, часть древнегерманской мифологии.</p>
</details>
</div>


.wrapp {
  display: flex;
}
summary {
  position: relative;
  padding-right: 20px;
}
p {
  position: absolute;
  top: 20px;
  left: 0;  
}
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
не вижу вариантов, кроме js
const details = document.querySelectorAll("details");

details.forEach((targetDetail) => {
  targetDetail.addEventListener("click", () => {
    details.forEach((detail) => {
      if (detail !== targetDetail) {
        detail.removeAttribute("open");
      }
    });
  });
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега CSS
document.addEventListener('click', ({ target: { tagName, parentNode: p } }) => {
  if (tagName === 'SUMMARY') {
    document.querySelectorAll('details').forEach(n => n.open = n.open && n === p);
  }
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы