Сокрытие текста в html без использования JS

.more,
.more:target~.link-more {
  display: none;
}

.more:target {
  display: block;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, tempora minus veniam odit similique. Nostrum quis maxime incidunt obcaecati pariatur temporibus saepe, velit repellendus aspernatur tempora, sunt at nesciunt, natus.</p>

<p class="more" id="more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, tempora minus veniam odit similique. Nostrum quis maxime incidunt obcaecati pariatur temporibus saepe, velit repellendus aspernatur tempora, sunt at nesciunt, natus.</p>

<a class="link-more" href="#more">Read more</a>

label {
  color: #f00;
  padding: .25rem 0;
}

.hidden-more,
label span:nth-child(2),
#more:checked~label span:nth-child(1) {
  display: none;
}

#more:checked+.hidden-more,
#more:checked~label span:nth-child(2) {
  display: block;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, tempora minus veniam odit similique. Nostrum quis maxime incidunt obcaecati pariatur temporibus saepe, velit repellendus aspernatur tempora, sunt at nesciunt, natus.</p>

<input type="checkbox" id="more" style="display: none" name='more'>

<p class="hidden-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, tempora minus veniam odit similique. Nostrum quis maxime incidunt obcaecati pariatur temporibus saepe, velit repellendus aspernatur tempora, sunt at nesciunt, natus.</p>

<label for="more">
  <span>Read more</span>
  <span>Close</span>
</label>

<details>
    <summary>Details</summary>
    <div>Something small enough to escape casual notice.</div>
</details>