diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 4fb547d..7e1d52e 100644 --- a/assets/css/gp-style-desktop.css +++ b/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; diff --git a/assets/js/main.js b/assets/js/main.js index 8888d23..4e09515 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -47,28 +47,60 @@ const reviewsSwiper = new Swiper('.reviews-swiper', { // how function howPc() { - let itemButtons = document.querySelectorAll('.how-control__item'), - itemBlocks = document.querySelectorAll('.how-content__item-block'); + let itemButtons = document.querySelectorAll('.how-control__item'); - itemButtons.forEach((button, index) => { - let block = itemBlocks[index]; + itemButtons.forEach((button) => { + 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'; - block.style.height = newHeight; - block.classList.add('active'); - button.classList.add('active'); + let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px'; + newActive.style.height = newHeight; + newActive.classList.add('active'); + newButton.classList.add('active'); }, 300); - } + } }) } -howPc(); \ No newline at end of file +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); +// } +// }) +// } \ No newline at end of file diff --git a/index.html b/index.html index a496f90..8a0e0ad 100644 --- a/index.html +++ b/index.html @@ -428,7 +428,7 @@
-
+
1
@@ -438,7 +438,7 @@

-
+
2
@@ -448,7 +448,7 @@

-
+
3
@@ -460,7 +460,7 @@
-
+

Проводим экспертизу помещения и определяем рыночный сегмент проекта @@ -484,7 +484,7 @@

-
+

Разрабатываем Эскизный проект фитнес клуба (Проект клуба на этапе голых стен) @@ -514,7 +514,7 @@

-
+

Осуществляем детализацию концепции и функциональное наполнение клуба