spoller.html

<style>
/* УНИВЕРСАЛЬНЫЕ СТИЛИ */
.spoiler1-button, 
.spoiler2-button,
.spoiler3-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  background-color: #f5f5f5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.3s;
  margin: 10px 0;
  gap: 8px;
}
.spoiler1-button:hover,
.spoiler2-button:hover,
.spoiler3-button:hover {
  background-color: #e0e0e0;
}
.spoiler1-content,
.spoiler2-content,
.spoiler3-content {
  padding: 16px;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  display: none;
  margin-top: -4px;
}
.arrow {
  flex-shrink: 0;
  transition: transform 0.3s;
}
/* серые линии сверху и снизу */
.spoiler-divider {
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}
/* 📱 Телефон (до 767px) */
@media (max-width: 767px) {
  .spoiler1-button,
  .spoiler2-button,
  .spoiler3-button {
    font-size: 18px;     /* крупнее текст */
    padding: 16px 20px;  /* больше зона клика */
    gap: 10px;
  }
  .spoiler1-content,
  .spoiler2-content,
  .spoiler3-content {
    font-size: 16px;
    padding: 14px;
  }
}
/* 📱📲 Планшет (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .spoiler1-button,
  .spoiler2-button,
  .spoiler3-button {
    font-size: 17px;
    padding: 14px 18px;
    gap: 9px;
  }
  .spoiler1-content,
  .spoiler2-content,
  .spoiler3-content {
    font-size: 15px;
    padding: 14px;
  }
}
</style>


<!--  Первый блок -->
<div class="spoiler-divider"></div> <!-- верхняя линия -->

<div class="spoiler-wrapper">
  <button class="spoiler1-button" onclick="toggleSpoiler1()" id="spoiler1Button">
    <span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17">
      <path fill="none" stroke="#000" stroke-width="1.7" d="M3.6 10.6L8.3 16l4.7-5.4M8.3 15.2V1.2"/>
    </svg>
  </button>
  <div class="spoiler1-content" id="spoiler1Content">
    <p>Контент первого спойлера</p>
  </div>
</div>

<div class="spoiler-divider"></div> <!-- нижняя линия -->


<script>
  function toggleSpoiler1() {
    const button = document.getElementById('spoiler1Button');
    const content = document.getElementById('spoiler1Content');
    const arrow = button.querySelector('.arrow');
    
    const isExpanded = content.style.display === 'block';
    content.style.display = isExpanded ? 'none' : 'block';
    arrow.style.transform = isExpanded ? 'rotate(0)' : 'rotate(180deg)';
    button.querySelector('.spoiler-text').textContent = isExpanded 
      ? 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ' 
      : 'СВЕРНУТЬ';
  }
</script>


<!--  Второй блок -->
<div class="spoiler-divider"></div> <!-- верхняя линия -->

<div class="spoiler-wrapper">
  <button class="spoiler2-button" onclick="toggleSpoiler2()" id="spoiler2Button">
    <span class="spoiler-text">УЗНАТЬ ДОПОЛНЕНИЕ</span>
    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17">
      <path fill="none" stroke="#000" stroke-width="1.7" d="M3.6 10.6L8.3 16l4.7-5.4M8.3 15.2V1.2"/>
    </svg>
  </button>
  <div class="spoiler2-content" id="spoiler2Content">
    <p>Контент второго спойлера</p>
  </div>
</div>

<div class="spoiler-divider"></div> <!-- нижняя линия -->


<script>
  function toggleSpoiler2() {
    const button = document.getElementById('spoiler2Button');
    const content = document.getElementById('spoiler2Content');
    const arrow = button.querySelector('.arrow');
    
    const isExpanded = content.style.display === 'block';
    content.style.display = isExpanded ? 'none' : 'block';
    arrow.style.transform = isExpanded ? 'rotate(0)' : 'rotate(180deg)';
    button.querySelector('.spoiler-text').textContent = isExpanded 
      ? 'УЗНАТЬ ДОПОЛНЕНИЕ' 
      : 'СВЕРНУТЬ';
  }
</script>


<!--  Третий блок (пример) -->
<div class="spoiler-divider"></div> <!-- верхняя линия -->

<div class="spoiler-wrapper">
  <button class="spoiler3-button" onclick="toggleSpoiler3()" id="spoiler3Button">
    <span class="spoiler-text">ТРЕТИЙ СПОЙЛЕР</span>
    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17">
      <path fill="none" stroke="#000" stroke-width="1.7" d="M3.6 10.6L8.3 16l4.7-5.4M8.3 15.2V1.2"/>
    </svg>
  </button>
  <div class="spoiler3-content" id="spoiler3Content">
    <p>Контент третьего спойлера</p>
  </div>
</div>

<div class="spoiler-divider"></div> <!-- нижняя линия -->


<script>
  function toggleSpoiler3() {
    const button = document.getElementById('spoiler3Button');
    const content = document.getElementById('spoiler3Content');
    const arrow = button.querySelector('.arrow');
    
    const isExpanded = content.style.display === 'block';
    content.style.display = isExpanded ? 'none' : 'block';
    arrow.style.transform = isExpanded ? 'rotate(0)' : 'rotate(180deg)';
    button.querySelector('.spoiler-text').textContent = isExpanded 
      ? 'ТРЕТИЙ СПОЙЛЕР' 
      : 'СВЕРНУТЬ';
  }
</script>


<!--  Для третьего  -->

<!--  1) Добавляем через запятую в стили класс .spoiler3-button  --> 

<!-- 2) Копируем HTML код изменяем внутри текст и номер в классе и ИД блока на 3  -->

<!--  2) Копируем JS код изменяем внутри номер в классе и ИД блока на 3  -->