Update spoller.html

spoller.html

@@ -1,7 +1,6 @@
 <style>
   .spoiler-wrapper {
     margin: 20px 0;
-    position: relative;
   }
   
   .spoiler-divider {
@@ -22,205 +21,84 @@
     cursor: pointer;
     font-size: 16px;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
-    transition: background-color 0.3s;
-    margin: 10px 0;
+    transition: all 0.3s;
     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">
+<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" 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 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="spoiler1ContentMobile">
-    <p>Это правильный ответ. Он будет скрыт до нажатия на кнопку.</p>
-    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
+  <div class="spoiler1-content" id="spoiler1Content">
+    <p>Контент первого спойлера</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');
+  function toggleSpoiler1() {
+    const button = document.getElementById('spoiler1Button');
+    const content = document.getElementById('spoiler1Content');
     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';
-      }
-    }
+    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 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>
+<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="spoiler2ContentMobile">
-    <p>Это содержимое второго спойлера. Он будет скрыт до нажатия на кнопку.</p>
-    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
+  <div class="spoiler2-content" id="spoiler2Content">
+    <p>Контент второго спойлера</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');
+  function toggleSpoiler2() {
+    const button = document.getElementById('spoiler2Button');
+    const content = document.getElementById('spoiler2Content');
     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
-      }
-    }
+    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>
+</script>