[html]
  <style>
.hcontainer {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.hcontent {
  display: none;
  padding: 1rem;
  background: #eee;
  border-radius: 4px;
  margin-bottom: 1rem;
}

#toggle-content:not(:checked) ~ .content1 {
  display: block;
}

#toggle-content:checked ~ .content2 {
  display: block;
}

/* Стили кнопки */
.toggle-button {
  display: inline-block;
  cursor: pointer;
  padding: 0.5rem 1rem;
  background: #333;
  color: #fff;
  border-radius: 4px;
  user-select: none;
}

/* Меняем текст кнопки с помощью ::before */
.toggle-button::before {
  content: "Показать второй блок";
}

#toggle-content:checked + .content1 + .content2 + .toggle-button::before {
  content: "Вернуть первый блок";
}

  </style>
<div class="hcontainer">
  <input type="checkbox" id="toggle-content" hidden>
 
  <div class="hcontent content1">
    <p>Это первый блок контента.</p>
  </div>
 
  <div class="hcontent content2">
    <p>А это второй блок контента.</p>
  </div>
 
  <label for="toggle-content" class="toggle-button"></label>
</div>
[/html]