Скрытие контента на сайте

Question

Есть многостраничный сайт с контентом типа: h1 p h2 p ul p h3 p h4 p tab p

Итп. Т.е после заголовков (H1...итд) идут разные блоки. где-то просто текст, где-то текст, список/таблица, потом опять текст. Разные. Можно ли как-то скрыть ВСЕ блоки, которые идут за заголовками (display:none либо что-то типа height:0 - чтобы не занимали место). но при нажатии на заголовок над этим блоком этот контент появлялся

Answer 1

Можно ли как-то скрыть ВСЕ блоки, которые идут за заголовками (display:none либо что-то типа height:0 - чтобы не занимали место). но при нажатии на заголовок над этим блоком этот контент появлялся

Конечно можно. Например вот так...

document.addEventListener('DOMContentLoaded', _ => {
  const r = /h\d+/i
  document.querySelectorAll('body > *').forEach(o => {
    if (r.test(o.tagName)) return
    o.classList.add('off')
  })
  document.querySelector('body').addEventListener('click', e => {
    let o = e.target
    if (!r.test(o.tagName)) return
    while (o = o.nextElementSibling, o && !r.test(o.tagName )) {
      o.classList.toggle('off')
    }
  })
})

.off {
  display: none;
}

<h1>Заголовок 1</h1>
<p>Описание</p>
<h2>Заголовок 1.1</h2>
<p>Текст для 1.1</p>
<p>Текст для 1.1 (продолжение)</p>
<h2>Заголовок 1.2</h2>
<p>Текст для 1.2</p>
<h1>Заголовок 2</h1>
<p>Текст для 2</p>
<h2>Заголовок 2.1</h2>
<p>Текст для 2.1</p>
<h1>Заголовок 3</h1>
<p>Текст для 3</p>

Answer 2

Вот два варианта,

с фокусом слетает, если кликать мимо

и со скрытым чекбоксом, а заголовок - его лейбл. Закрывается по повторному клику

.block_title:focus~.block_body {
  display: block;
}

.block_body {
  display: none;
}

.block_title2 {
  font-size: 1.5em;
  font-weight:bold;
  &>input{
    display:none
  }
  &:has(input:checked)~.block_body2 {

    display: block;
  }
}

.block_body2 {
  display: none;
}

<h2 class=block_title tabindex=1>Заголовок с фокусом</h2>
<div class=block_body>
  <p>sdklfjgdfklsjhg</p>
  <p>sdlkfgsdkjgh</p>
  <p>sldkfjgldskgj</p>
</div>

<label class=block_title2>Заголовок с checkbox <input type=checkbox></label>
<div class=block_body2>
  <p>sdklfjgdfklsjhg</p>
  <p>sdlkfgsdkjgh</p>
  <p>sldkfjgldskgj</p>
</div>

Answer 3

Из вопроса непонятно, какой из вариантов ты хочешь.

И не забудь проверить кроссбраузерность.

:is(h1, h2, h3, h4, h5, h6) ~ * {
  display: none;
}

<div>
  <h1>Заголовок 1</h1>
  <p>Ещё что-то</p>
</div>

<div>
   <p>Привет</p>
</div>

<div>
  <h1>Заголовок 2</h1>
  <p>Ещё что-то</p>
</div>

:is(h1, h2, h3, h4, h5, h6) ~ *,
:has(h1, h2, h3, h4, h5, h6) ~ * {
  display: none;
}

<div>
  <h1>Заголовок 1</h1>
  <p>Ещё что-то</p>
</div>

<div>
   <p>Привет</p>
</div>

<div>
  <h1>Заголовок 2</h1>
  <p>Ещё что-то</p>
</div>

Answer 4

Есть такие теги как <details> и <summary>, которые создают необходимые спойлеры.

<details>
  <summary>
    <h1 style="display:inline-block">1 Заголовок h1</h1>
  </summary>
<p>Скрытый контент, открывающийся/закрывающийся при клике на заголовке H1.</p>
</details>
<details>
  <summary>
    <h2 style="display:inline-block">2 Заголовок h2</h2>
  </summary>
<p>Второй скрытый контент, открывающийся/закрывающийся при клике на заголовке H2.</p>
</details>

БЛОГ НА HUSL

Скрытие контента на сайте

Ответы (4 шт):