spoller.html

<style>
  /* УНИВЕРСАЛЬНЫЕ СТИЛИ */
  .spoiler1-button, 
  .spoiler2-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 {
    background-color: #e0e0e0;
  }
  
  .spoiler1-content,
  .spoiler2-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;
  }

  /* 📱 Адаптив для телефона */
  @media (max-width: 767px) {
    .spoiler1-button,
    .spoiler2-button {
      font-size: 14px;
      padding: 10px 12px;
      gap: 6px;
    }
    .spoiler1-content,
    .spoiler2-content {
      font-size: 14px;
      padding: 12px;
    }
  }
</style>


<!--  Первый блок HTML сдесь класс и ИД боков с номером 1 -->

<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>


<!--  Скрипт для первого блока, работает с классом и ИД с номером 1  -->
<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>



<!--  Второй блок HTML сдесь класс и ИД боков с номером 2   -->
<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>


<!--  Скрипт для второго блока, работает с классом и ИД с номером 2  -->
<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>


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

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

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

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