переделал js для открытия элементов в how

assets/css/gp-style-desktop.css

@@ -489,8 +489,15 @@
     margin-left: 40px;
 
     width: 100%;
+
+    position: relative;
 }
 .how-content__item-block{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+
     height: 0;
     overflow: hidden;
 

assets/js/main.js

@@ -47,28 +47,60 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
 // how
 
 function howPc() {
-    let itemButtons = document.querySelectorAll('.how-control__item'),
+    let itemButtons = document.querySelectorAll('.how-control__item');
-        itemBlocks = document.querySelectorAll('.how-content__item-block');
 
-    itemButtons.forEach((button, index) => {
+    itemButtons.forEach((button) => {
-        let block = itemBlocks[index];
+        let num = button.dataset.num;
+
+        button.onclick = function name(params, index) {
 
-        button.onclick = function () {
             let activeContent = document.querySelector('.how__content').querySelector('.active'),
                 activeButton = document.querySelector('.how__control').querySelector('.active');
 
+            if (activeContent.dataset.num == button.dataset.num) return;
+            
             activeContent.style.height = '0px';
             activeContent.classList.remove('active');
             activeButton.classList.remove('active');
 
+            let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
+                newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
+            
+
             setTimeout(() => {
-                let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px';
+                let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
-                block.style.height = newHeight;
+                newActive.style.height = newHeight;
-                block.classList.add('active');
+                newActive.classList.add('active');
-                button.classList.add('active');
+                newButton.classList.add('active');
             }, 300);
         }        
     })
 }
 
 howPc();
+
+
+// function howPc() {
+//     let itemButtons = document.querySelectorAll('.how-control__item'),
+//         itemBlocks = document.querySelectorAll('.how-content__item-block');
+
+//     itemButtons.forEach((button, index) => {
+//         let block = itemBlocks[index];
+
+//         button.onclick = function () {
+//             let activeContent = document.querySelector('.how__content').querySelector('.active'),
+//                 activeButton = document.querySelector('.how__control').querySelector('.active');
+            
+//             activeContent.style.height = '0px';
+//             activeContent.classList.remove('active');
+//             activeButton.classList.remove('active');
+
+//             setTimeout(() => {
+//                 let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px';
+//                 block.style.height = newHeight;
+//                 block.classList.add('active');
+//                 button.classList.add('active');
+//             }, 300);
+//         }
+//     })
+// }

index.html

@@ -428,7 +428,7 @@
 
                 <article class="how">
                     <div class="how__control">
-                        <div class="how-control__item active">
+                        <div class="how-control__item active" data-num="1">
                             <div class="how-control-item__number title-3">
                                 1
                             </div>
@@ -438,7 +438,7 @@
                             </p>
                         </div>
 
-                        <div class="how-control__item">
+                        <div class="how-control__item" data-num="2">
                             <div class="how-control-item__number title-3">
                                 2
                             </div>
@@ -448,7 +448,7 @@
                             </p>
                         </div>
 
-                        <div class="how-control__item">
+                        <div class="how-control__item" data-num="3">
                             <div class="how-control-item__number title-3">
                                 3
                             </div>
@@ -460,7 +460,7 @@
                     </div>
 
                     <div class="how__content">
-                        <div class="how-content__item-block active" style="height: 354px;">
+                        <div class="how-content__item-block active" style="height: 354px;" data-num="1">
                             <div class="how-content__item">
                                 <p class="text-1">
                                     Проводим экспертизу помещения и определяем рыночный сегмент проекта
@@ -484,7 +484,7 @@
                             </div>
                         </div>
 
-                        <div class="how-content__item-block">
+                        <div class="how-content__item-block" data-num="2">
                             <div class="how-content__item">
                                 <p class="text-1">
                                     Разрабатываем Эскизный проект фитнес клуба (Проект клуба на этапе голых стен)
@@ -514,7 +514,7 @@
                             </div>
                         </div>
 
-                        <div class="how-content__item-block">
+                        <div class="how-content__item-block" data-num="3">
                             <div class="how-content__item">
                                 <p class="text-1">
                                     Осуществляем детализацию концепции и функциональное наполнение клуба