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

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

Browse Source
fitness
Kirill Pet 8 months ago
parent 96948651b2
commit 6bc4c7213c
3 changed files with 56 additions and 17 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      assets/css/gp-style-desktop.css
  2. 54
      assets/js/main.js
  3. 12
      index.html

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

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

54
assets/js/main.js
Unescape View File

@ -47,28 +47,60 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
// how // how
function howPc() { 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'), let activeContent = document.querySelector('.how__content').querySelector('.active'),
activeButton = document.querySelector('.how__control').querySelector('.active'); activeButton = document.querySelector('.how__control').querySelector('.active');
if (activeContent.dataset.num == button.dataset.num) return;
activeContent.style.height = '0px'; activeContent.style.height = '0px';
activeContent.classList.remove('active'); activeContent.classList.remove('active');
activeButton.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(() => { 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); }, 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);
// }
// })
// }

12
index.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save