FAQ page complete

wp-content/themes/biuro/css/07-components/_component--accordion.css

@@ -4,12 +4,28 @@
 
 /* critical:end */
 
-.c-accordion--section { background: #fff; margin-bottom: 55px;
-}
+.c-accordion--section { background: #fff; margin-bottom: 55px; }
 
-.c-accordion--header { display: flex; padding: 30px; color: #2A3644; align-items: center; cursor: pointer;
-    svg { margin-right: 25px; flex: 0 0 16px; }
+.c-accordion--header { display: flex; padding: 16px 10px; color: #2A3644; align-items: center; cursor: pointer; user-select: none;
+    @media (--min--medium) {
+        padding: 26px 30px;
+    }
+    svg { margin-right: 14px; flex: 0 0 16px; transform: rotate(0deg); transition: transform .22s linear; transform-origin: 50% 50%;
+        @media (--min--medium) {
+            margin-right: 24px;
+        }
+    }
     h3  { margin: 0; padding: 0; font-size: 16px; line-height: 29px; font-weight: bold; line-height: 19px; }
 }
 
-.c-accordion--content { max-height: 0; overflow: hidden; border-bottom: 1px solid #f8f8f8; }
+.c-accordion--header--is-expanded {
+    svg { transform: rotate(225deg); }
+}
+
+.c-accordion--content { padding: 0 20px 0 40px; border-bottom: 1px solid #f8f8f8; transition: height 0.22s linear; overflow: hidden;
+    @media (--min--medium) {
+        padding: 0 30px 0 70px;
+    }
+}
+
+.c-accordion--content--is-collapsed { height: 0; }

wp-content/themes/biuro/js/main.js

@@ -611,3 +611,56 @@ const submitContactsFrom = (form) => {
 document.querySelectorAll('[name="form-position"], [name="form-employees"], [name="form-employers"]').forEach((form) => {
     form.addEventListener('submit', () => { submitContactsFrom(form); });
 });
+
+const collapseContent = (n) => {
+    const h = n.scrollHeight;
+    const t = n.style.transition;
+
+    n.style.transition = '';
+
+    requestAnimationFrame(() => {
+        n.style.height = h + 'px';
+        n.style.transition = t;
+
+        requestAnimationFrame(() => {
+            n.style.height = 0 + 'px';
+        });
+    });
+};
+
+const expandContent = (n) => {
+    const h = n.scrollHeight;
+    const done = (e) => {
+        n.removeEventListener('transitionend', done);
+
+        // n.style.height = null;
+    };
+
+    n.style.height = h + 'px';
+
+    n.addEventListener('transitionend', done);
+};
+
+document.querySelectorAll('.js-accordion--header').forEach((header) => {
+    header.addEventListener('click', () => {
+        const node = header.nextElementSibling;
+
+        if (!node || !node.classList.contains('c-accordion--content')) {
+            return;
+        }
+
+        const isOpen = header.classList.contains('c-accordion--header--is-expanded');
+
+        if (isOpen) {
+            collapseContent(node);
+        } else {
+            expandContent(node);
+        }
+
+        header.classList.toggle('c-accordion--header--is-expanded', !isOpen);
+    });
+});
+
+document.querySelectorAll('.c-accordion--content').forEach((content) => {
+    content.classList.add('c-accordion--content--is-collapsed');
+});