Update spoller.html

spoller.html

@@ -1,9 +1,9 @@
 
 <style>
-
 /* УНИВЕРСАЛЬНЫЕ СТИЛИ */
 .spoiler1-button, 
-.spoiler2-button {
+.spoiler2-button,
+.spoiler3-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -20,14 +20,14 @@
   margin: 10px 0;
   gap: 8px;
 }
-
 .spoiler1-button:hover,
-.spoiler2-button:hover {
+.spoiler2-button:hover,
+.spoiler3-button:hover {
   background-color: #e0e0e0;
 }
-
 .spoiler1-content,
-.spoiler2-content {
+.spoiler2-content,
+.spoiler3-content {
   padding: 16px;
   border: 1px solid #ddd;
   border-top: none;
@@ -35,48 +35,52 @@
   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 {
+  .spoiler2-button,
+  .spoiler3-button {
     font-size: 18px;     /* крупнее текст */
     padding: 16px 20px;  /* больше зона клика */
     gap: 10px;
   }
   .spoiler1-content,
-  .spoiler2-content {
+  .spoiler2-content,
+  .spoiler3-content {
     font-size: 16px;
     padding: 14px;
   }
 }
-
 /* 📱📲 Планшет (768px – 1024px) */
 @media (min-width: 768px) and (max-width: 1024px) {
   .spoiler1-button,
-  .spoiler2-button {
+  .spoiler2-button,
+  .spoiler3-button {
     font-size: 17px;
     padding: 14px 18px;
     gap: 9px;
   }
   .spoiler1-content,
-  .spoiler2-content {
+  .spoiler2-content,
+  .spoiler3-content {
     font-size: 15px;
     padding: 14px;
   }
 }
-
-
 </style>
 
 
-<!--  Первый блок HTML сдесь класс и ИД боков с номером 1 -->
-
+<!--  Первый блок -->
 <div class="spoiler-divider"></div> <!-- верхняя линия -->
 
 <div class="spoiler-wrapper">
@@ -94,8 +98,6 @@
 <div class="spoiler-divider"></div> <!-- нижняя линия -->
 
 
-
-<!--  Скрипт для первого блока, работает с классом и ИД с номером 1  -->
 <script>
   function toggleSpoiler1() {
     const button = document.getElementById('spoiler1Button');
@@ -112,8 +114,7 @@
 </script>
 
 
-
-<!--  Второй блок HTML сдесь класс и ИД боков с номером 2   -->
+<!--  Второй блок -->
 <div class="spoiler-divider"></div> <!-- верхняя линия -->
 
 <div class="spoiler-wrapper">
@@ -131,8 +132,6 @@
 <div class="spoiler-divider"></div> <!-- нижняя линия -->
 
 
-
-<!--  Скрипт для второго блока, работает с классом и ИД с номером 2  -->
 <script>
   function toggleSpoiler2() {
     const button = document.getElementById('spoiler2Button');
@@ -149,6 +148,40 @@
 </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  -->