spoller.html

<style>
  .spoiler-wrapper {
    margin: 20px 0;
    position: relative;
  }
  
  .spoiler-divider {
    height: 1px;
    background-color: #ddd;
    margin: 10px 0;
  }
  
  .spoiler1-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 {
    background-color: #e0e0e0;
  }
  
  .spoiler1-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 (min-width: 768px) {
    .spoiler-desktop {
      display: block;
    }
    .spoiler-mobile {
      display: none;
    }
    .spoiler1-content {
      margin-left: 0;
    }
  }
  
  /* Мобильная версия (кнопка после контентом) */
  @media (max-width: 767px) {
    .spoiler-desktop {
      display: none;
    }
    .spoiler-mobile {
      display: flex;
      flex-direction: column;
    }
    .spoiler-mobile .spoiler1-content {
      order: 2;
      border-top: 1px solid #ddd;
      border-radius: 0 0 4px 4px;
      margin-top: -4px;
    }
    .spoiler-mobile .spoiler1-button {
      order: 1;
      border-radius: 4px 4px 0 0;
      margin-bottom: 0;
    }
  }
</style>

<div class="spoiler-divider"></div>

<!-- Десктопная версия (кнопка сверху) -->
<div class="spoiler-wrapper spoiler-desktop">
  <button class="spoiler1-button" onclick="toggleSpoiler(this, 'desktop')" id="spoiler1ButtonDesktop">
    <span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" stroke="#000000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M 3.642857 10.552631 L 8.31203 16 L 12.981202 10.552631 M 8.31203 15.221805 L 8.31203 1.214286"></path>
    </svg>
  </button>
  <div class="spoiler1-content" id="spoiler1ContentDesktop">
    <p>Это правильный ответ. Он будет скрыт до нажатия на кнопку.</p>
    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
  </div>
</div>

<!-- Мобильная версия (кнопка снизу) -->
<div class="spoiler-wrapper spoiler-mobile">
  <button class="spoiler1-button" onclick="toggleSpoiler(this, 'mobile')" id="spoiler1ButtonMobile">
    <span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" stroke="#000000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M 3.642857 10.552631 L 8.31203 16 L 12.981202 10.552631 M 8.31203 15.221805 L 8.31203 1.214286"></path>
    </svg>
  </button>
  <div class="spoiler1-content" id="spoiler1ContentMobile">
    <p>Это правильный ответ. Он будет скрыт до нажатия на кнопку.</p>
    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
  </div>
</div>

<div class="spoiler-divider"></div>

<script>
  function toggleSpoiler(button, version) {
    const isExpanded = button.classList.toggle('active');
    const textSpan = button.querySelector('.spoiler-text');
    const arrow = button.querySelector('.arrow');
    
    textSpan.textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
    arrow.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
    
    if (version === 'desktop') {
      const content = document.getElementById('spoiler1ContentDesktop');
      content.style.display = isExpanded ? 'block' : 'none';
      
      // Синхронизация для мобильной версии
      const mobileButton = document.getElementById('spoiler1ButtonMobile');
      if (mobileButton) {
        mobileButton.classList.toggle('active', isExpanded);
        mobileButton.querySelector('.spoiler-text').textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
        mobileButton.querySelector('.arrow').style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
        document.getElementById('spoiler1ContentMobile').style.display = isExpanded ? 'block' : 'none';
      }
    } else {
      const content = document.getElementById('spoiler1ContentMobile');
      content.style.display = isExpanded ? 'block' : 'none';
      
      // Синхронизация для десктопной версии
      const desktopButton = document.getElementById('spoiler1ButtonDesktop');
      if (desktopButton) {
        desktopButton.classList.toggle('active', isExpanded);
        desktopButton.querySelector('.spoiler-text').textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
        desktopButton.querySelector('.arrow').style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
        document.getElementById('spoiler1ContentDesktop').style.display = isExpanded ? 'block' : 'none';
      }
    }
  }
</script>



<style>
  /* Стили остаются точно такими же, их можно не дублировать */
  .spoiler-wrapper {
    margin: 20px 0;
    position: relative;
  }
  
  .spoiler-divider {
    height: 1px;
    background-color: #ddd;
    margin: 10px 0;
  }
  
  .spoiler2-button {  /* Изменено spoiler1 на spoiler2 */
    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;
  }
  
  .spoiler2-button:hover {  /* Изменено spoiler1 на spoiler2 */
    background-color: #e0e0e0;
  }
  
  .spoiler2-content {  /* Изменено spoiler1 на spoiler2 */
    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 (min-width: 768px) {
    .spoiler-desktop {
      display: block;
    }
    .spoiler-mobile {
      display: none;
    }
    .spoiler2-content {  /* Изменено spoiler1 на spoiler2 */
      margin-left: 0;
    }
  }
  
  /* Мобильная версия */
  @media (max-width: 767px) {
    .spoiler-desktop {
      display: none;
    }
    .spoiler-mobile {
      display: flex;
      flex-direction: column;
    }
    .spoiler-mobile .spoiler2-content {  /* Изменено spoiler1 на spoiler2 */
      order: 2;
      border-top: 1px solid #ddd;
      border-radius: 0 0 4px 4px;
      margin-top: -4px;
    }
    .spoiler-mobile .spoiler2-button {  /* Изменено spoiler1 на spoiler2 */
      order: 1;
      border-radius: 4px 4px 0 0;
      margin-bottom: 0;
    }
  }
</style>

<div class="spoiler-divider"></div>

<!-- Десктопная версия второго спойлера -->
<div class="spoiler-wrapper spoiler-desktop">
  <button class="spoiler2-button" onclick="toggleSpoiler2(this, 'desktop')" id="spoiler2ButtonDesktop">
    <span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" stroke="#000000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M 3.642857 10.552631 L 8.31203 16 L 12.981202 10.552631 M 8.31203 15.221805 L 8.31203 1.214286"></path>
    </svg>
  </button>
  <div class="spoiler2-content" id="spoiler2ContentDesktop">
    <p>Это содержимое второго спойлера. Он будет скрыт до нажатия на кнопку.</p>
    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
  </div>
</div>

<!-- Мобильная версия второго спойлера -->
<div class="spoiler-wrapper spoiler-mobile">
  <button class="spoiler2-button" onclick="toggleSpoiler2(this, 'mobile')" id="spoiler2ButtonMobile">
    <span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" stroke="#000000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M 3.642857 10.552631 L 8.31203 16 L 12.981202 10.552631 M 8.31203 15.221805 L 8.31203 1.214286"></path>
    </svg>
  </button>
  <div class="spoiler2-content" id="spoiler2ContentMobile">
    <p>Это содержимое второго спойлера. Он будет скрыт до нажатия на кнопку.</p>
    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
  </div>
</div>

<div class="spoiler-divider"></div>

<script>
  // Функция для второго спойлера (изменено toggleSpoiler на toggleSpoiler2)
  function toggleSpoiler2(button, version) {
    const isExpanded = button.classList.toggle('active');
    const textSpan = button.querySelector('.spoiler-text');
    const arrow = button.querySelector('.arrow');
    
    textSpan.textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
    arrow.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
    
    if (version === 'desktop') {
      const content = document.getElementById('spoiler2ContentDesktop');  // Изменено 1 на 2
      content.style.display = isExpanded ? 'block' : 'none';
      
      // Синхронизация для мобильной версии
      const mobileButton = document.getElementById('spoiler2ButtonMobile');  // Изменено 1 на 2
      if (mobileButton) {
        mobileButton.classList.toggle('active', isExpanded);
        mobileButton.querySelector('.spoiler-text').textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
        mobileButton.querySelector('.arrow').style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
        document.getElementById('spoiler2ContentMobile').style.display = isExpanded ? 'block' : 'none';  // Изменено 1 на 2
      }
    } else {
      const content = document.getElementById('spoiler2ContentMobile');  // Изменено 1 на 2
      content.style.display = isExpanded ? 'block' : 'none';
      
      // Синхронизация для десктопной версии
      const desktopButton = document.getElementById('spoiler2ButtonDesktop');  // Изменено 1 на 2
      if (desktopButton) {
        desktopButton.classList.toggle('active', isExpanded);
        desktopButton.querySelector('.spoiler-text').textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
        desktopButton.querySelector('.arrow').style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
        document.getElementById('spoiler2ContentDesktop').style.display = isExpanded ? 'block' : 'none';  // Изменено 1 на 2
      }
    }
  }
</script>