Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kirill Pet
2024-12-18 23:51:48 +03:00
parent 96948651b2
commit 6bc4c7213c
3 changed files with 56 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/css/gp-style-desktop.css
View File

@@ -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;

50
assets/js/main.js
View File

@@ -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();
// 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);
// }
// })
// }

12
index.html
View File

@@ -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">
Осуществляем детализацию концепции и функциональное наполнение клуба