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

Question

[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;  
}

Answer 1

[frontend queen]

не вижу вариантов, кроме js

const details = document.querySelectorAll("details");

details.forEach((targetDetail) => {
  targetDetail.addEventListener("click", () => {
    details.forEach((detail) => {
      if (detail !== targetDetail) {
        detail.removeAttribute("open");
      }
    });
  });
});

Comments

[user_tm]

Бро... от души рахмет большой, ты мой родной! )))

[frontend queen]

user_tm, ахахзхах)

Answer 2

[0xD34F]

Хорошо бы если на чистом css

Придётся сильно поменять разметку. Управлять видимостью вкладок можно с помощью скрытых радиокнопок.

но и js тоже можно

document.addEventListener('click', ({ target: { tagName, parentNode: p } }) => {
  if (tagName === 'SUMMARY') {
    document.querySelectorAll('details').forEach(n => n.open = n.open && n === p);
  }
});

// или

const details = document.querySelectorAll('details');
const onClick = e => details.forEach(n => n.open = n.open && n === e.target.parentNode);
details.forEach(n => n.children[0].addEventListener('click', onClick));

Comments

[user_tm]

Спасибо, Ваш вариант тоже работает.