figma_accordeon_01

main.js

@@ -1,7 +1,27 @@
-document.querySelectorAll('.header_top_item').forEach((item) => {
-  item.addEventListener('click', (e) => {
-    e.preventDefault(); // если не нужно переходить со страницы
-    document.querySelectorAll('.header_top_item').forEach(el => el.classList.remove('active'));
-    item.classList.add('active');
-  });
-});
+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';
+    });
+  });