Update spoller.html

spoller.html

@@ -1,5 +1,5 @@
 <style>
-  /* УНИВЕРСАЛЬНЫЕ СТИЛИ (только добавлено, ничего не заменено) */
+  /* УНИВЕРСАЛЬНЫЕ СТИЛИ (если добавляем новый блок то дописываем через запятую его новый класс пример .spoiler3-button) */
   .spoiler1-button, 
   .spoiler2-button {
     display: flex;
@@ -18,12 +18,12 @@
     margin: 10px 0;
     gap: 8px;
   }
-  
+  /* (если добавляем новый блок то дописываем через запятую его новый класс пример .spoiler3-button) */ 
   .spoiler1-button:hover,
   .spoiler2-button:hover {
     background-color: #e0e0e0;
   }
-  
+  /* (если добавляем новый блок то дописываем через запятую его новый класс пример .spoiler3-button) */   
   .spoiler1-content,
   .spoiler2-content {
     padding: 16px;
@@ -40,6 +40,7 @@
   }
 </style>
 
+/* Первый блок HTML сдесь класс и ИД боков с нгомером 1  */ 
 <div class="spoiler-divider"></div>
 
 <div class="spoiler-wrapper">
@@ -56,6 +57,8 @@
 
 <div class="spoiler-divider"></div>
 
+
+/* Скрипт для первого блока, работает с классами и ИД с номером 1 */ 
 <script>
   function toggleSpoiler1() {
     const button = document.getElementById('spoiler1Button');
@@ -73,7 +76,7 @@
 
 
 
-
+/* Второй блок HTML сдесь класс и ИД боков с нгомером 2  */ 
 <div class="spoiler-divider"></div>
 
 <div class="spoiler-wrapper">
@@ -90,6 +93,8 @@
 
 <div class="spoiler-divider"></div>
 
+
+/* Скрипт для второго блока, работает с классами и ИД с номером 2 */ 
 <script>
   function toggleSpoiler2() {
     const button = document.getElementById('spoiler2Button');
@@ -103,4 +108,14 @@
       ? 'УЗНАТЬ ДОПОЛНЕНИЕ' 
       : 'СВЕРНУТЬ';
   }
-</script>
+</script>
+
+
+/* Для третьего*/ 
+
+/* 1) Добавляем через запчтую стили с классом  .spoiler3-button */ 
+
+/* 2) Копируем HTML код изменяем внуьри текст и номер в классе и ИД блока на 3 */ 
+
+/* 2) Копируем JS код изменяем внуьри номер в классе и ИД блока на 3 */ 
+