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

assets/css/gp-style-desktop.css

@@ -489,6 +489,19 @@
     margin-left: 40px;
 
     width: 100%;
+
+    position: relative;
+}
+.how-content__item-block{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    height: 0;
+    overflow: hidden;
+
+    transition: height .3s;
 }
 .how-content__item{
     width: 100%;
@@ -498,11 +511,6 @@
     background-color: var(--background-grey);
 
     overflow: hidden;
-
-    display: none;
-}
-.how-content__item.active{
-    display: block;
 }
 .how-content__item .text-2{
     margin-top: 16px;

assets/js/main.js

@@ -43,3 +43,64 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
 })
 
 // gymSwiper.destroy();
+
+// how
+
+function howPc() {
+    let itemButtons = document.querySelectorAll('.how-control__item');
+
+    itemButtons.forEach((button) => {
+        let num = button.dataset.num;
+
+        button.onclick = function name(params, index) {
+
+            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 = newActive.querySelector('.how-content__item').offsetHeight + 'px';
+                newActive.style.height = newHeight;
+                newActive.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

@@ -187,7 +187,7 @@
         </header>
 
         <main class="wrapper">
-            <article class="space">
+            <!-- <article class="space">
                 <p class="title-1">
                     Создаем пространства, которые работают
                 </p>
@@ -419,7 +419,7 @@
                         все проекты
                     </a>
                 </div>
-            </div>
+            </div> -->
 
             <div class="main__item">
                 <p class="title-1">
@@ -428,7 +428,7 @@
 
                 <article class="how">
                     <div class="how__control">
-                        <div class="how-control__item">
+                        <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,8 @@
                     </div>
 
                     <div class="how__content">
-                        <div class="how-content__item active">
+                        <div class="how-content__item-block active" style="height: 354px;" data-num="1">
+                            <div class="how-content__item">
                                 <p class="text-1">
                                     Проводим экспертизу помещения и определяем рыночный сегмент проекта
                                 </p>
@@ -481,7 +482,9 @@
                                     <img src="/assets/img/photo/how-1.png" alt="" class="how-content-item__img how-content-item__img--1">
                                 </div>
                             </div>
+                        </div>
 
+                        <div class="how-content__item-block" data-num="2">
                             <div class="how-content__item">
                                 <p class="text-1">
                                     Разрабатываем Эскизный проект фитнес клуба (Проект клуба на этапе голых стен)
@@ -509,7 +512,9 @@
                                     <img src="/assets/img/photo/how-2.png" alt="" class="how-content-item__img how-content-item__img--2">
                                 </div>
                             </div>
+                        </div>
 
+                        <div class="how-content__item-block" data-num="3">
                             <div class="how-content__item">
                                 <p class="text-1">
                                     Осуществляем детализацию концепции и функциональное наполнение клуба
@@ -532,10 +537,11 @@
                                 </div>
                             </div>
                         </div>
+                    </div>
                 </article>
             </div>
 
-            <div class="main__item">
+            <!-- <div class="main__item">
                 <article class="free">
                     <p class="title-1">
                         Получи проект бесплатно
@@ -591,9 +597,9 @@
                         </form> 
                     </div>
                 </article>
-            </div>
+            </div> -->
 
-            <div class="main__item">
+            <!-- <div class="main__item">
                 <p class="title-1 title--center">
                     Отзывы клиентов
                 </p>
@@ -754,9 +760,9 @@
                         <div class="swiper-button-next"></div> 
                     </div>
                 </article>
-            </div>
+            </div> -->
 
-            <div class="main__item">
+            <!-- <div class="main__item">
                 <div class="text-form">
                     <div class="text-form__content">
                         <p class="title-1">
@@ -817,9 +823,9 @@
                     </div> 
                 </div>
                                
-            </div>
+            </div> -->
 
-            <div class="main__item">
+            <!-- <div class="main__item">
                 <p class="title-1">
                     Дополнительные услуги
                 </p>
@@ -866,9 +872,9 @@
                         </div>
                     </div>
                 </article>
-            </div>
+            </div> -->
 
-            <div class="main__item">
+            <!-- <div class="main__item">
                 <article class="call">
                     <p class="title-1">
                         Свяжитесь с нами
@@ -891,7 +897,7 @@
                         </div>
                     </div>
                 </article>
-            </div>
+            </div> -->
         </main>
 
         <footer class="footer">