figma_accordeon_01

html01/html/js.js

@@ -0,0 +1,27 @@
+const items = document.querySelectorAll('.accordion-item');
+
+// Делаем первый аккордеон активным по умолчанию
+if(items.length > 0) {
+  items[0].classList.add('active');
+}
+
+// items.forEach(item => {
+//   item.addEventListener('click', () => {
+//     items.forEach(i => i.classList.remove('active'));
+//     item.classList.add('active');
+//   });
+// });
+// код ниже если нужно картинку на открытую и закрытую колонку(ток классы добавь в html и картинки по 2 или че там придумаешь)
+items.forEach(item => {
+    item.addEventListener('click', () => {
+      items.forEach(i => {
+        i.classList.remove('active');
+        i.querySelector('.img-open').style.display = 'none';
+        i.querySelector('.img-closed').style.display = 'block';
+      });
+  
+      item.classList.add('active');
+      item.querySelector('.img-open').style.display = 'block';
+      item.querySelector('.img-closed').style.display = 'none';
+    });
+  });