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;

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