From 6a2375f26b8367574226f07cf51de06cbd2040c0 Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Tue, 8 Oct 2024 15:37:31 +0300 Subject: [PATCH] toggle js --- assets/css/gp-style-core.css | 2 +- assets/css/gp-style-desktop.css | 36 +++++++ assets/css/gp-style-mobile.css | 10 ++ assets/css/gp-style-tablet.css | 16 +++ assets/img/svg/main/arrow-left.svg | 5 + assets/img/svg/main/arrow-right.svg | 5 + assets/js/gp-main.js | 38 ++++++- modal-filter.html | 6 +- product.html | 149 ++++++++++++++++------------ 9 files changed, 196 insertions(+), 71 deletions(-) create mode 100644 assets/img/svg/main/arrow-left.svg create mode 100644 assets/img/svg/main/arrow-right.svg diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 8bd4136..825d9e2 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -1021,7 +1021,7 @@ button{ cursor: pointer; } .toggle__block-content{ - /* height: 0; */ + height: 0; overflow: hidden; transition: height .2s ease-out; diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 13926e4..7cc247b 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -674,6 +674,7 @@ margin: 48px 24px 24px 24px; display: flex; + align-items: start; flex-wrap: wrap; } .detail__images{ @@ -855,6 +856,41 @@ margin-bottom: 48px; } .detail__catalot{ + margin-top: 64px; +} +.detail-catalot__header{ + display: flex; + justify-content: space-between; + align-items: center; +} +.detail-catalot__control{ + display: flex; + align-items: center; +} +.detail-catalot-control__button{ + margin-left: 24px; + + width: 48px; + aspect-ratio: 1; + + border-radius: 50%; + border: 1px solid var(--background-black); + background: none; + + display: flex; + justify-content: center; + align-items: center; +} +.detail-catalot__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + text-align: center; + color: var(--text-0); +} +.detail-catalot__content{ margin: 12px -12px -12px -12px; width: 100%; diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css index 81467a0..1fd806b 100644 --- a/assets/css/gp-style-mobile.css +++ b/assets/css/gp-style-mobile.css @@ -66,6 +66,16 @@ margin-top: 20px; } /* footer */ + +/* detail */ +.toggle__table--two .toggle-table__block{ + width: 100%; +} +.toggle__table--two .toggle-table__block:nth-child(even){ + margin-top: 32px; + margin-left: 0; +} +/* detail */ } @media only screen and (max-width: 576px) { diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index fe4a2e8..8396d2f 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -57,4 +57,20 @@ width: calc(50% - 24px); } /* product */ + + +/* detail */ +.detail{ + flex-direction: column; +} + +.detail__images, +.detail__content{ + width: 100%; +} +.detail__content{ + margin-top: 48px; + margin-left: 0; +} +/* detail */ } \ No newline at end of file diff --git a/assets/img/svg/main/arrow-left.svg b/assets/img/svg/main/arrow-left.svg new file mode 100644 index 0000000..465c268 --- /dev/null +++ b/assets/img/svg/main/arrow-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/svg/main/arrow-right.svg b/assets/img/svg/main/arrow-right.svg new file mode 100644 index 0000000..8952470 --- /dev/null +++ b/assets/img/svg/main/arrow-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js index 4727b32..c406fda 100644 --- a/assets/js/gp-main.js +++ b/assets/js/gp-main.js @@ -26,4 +26,40 @@ toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu'); // lang start toggleOpenX('.lang__open','.lang__content','.lang__list'); -// lang end \ No newline at end of file +// lang end + +// toggle + +let toggles = document.querySelectorAll('.toggle'); + + + +function open(mainElement, buttonElement ,widthElement, contentElement, close) { + let elements = document.querySelectorAll(mainElement); + + elements.forEach(e => { + let thisMainElement = e, + thisButtonElement = e.querySelector(buttonElement), + thisWidthElement = e.querySelector(widthElement), + thisContentElement = e.querySelector(contentElement); + + if (close == true) { + console.log(1); + } + + thisButtonElement.onclick = function (e) { + let width = thisWidthElement.clientHeight; + + if (!thisMainElement.classList.contains('active')) { + thisContentElement.style.height = `${width}px`; + thisMainElement.classList.add('active'); + }else{ + thisContentElement.style.height = null; + thisMainElement.classList.remove('active'); + } + } + + }); +} + +open('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); \ No newline at end of file diff --git a/modal-filter.html b/modal-filter.html index 82b539c..ff72eab 100644 --- a/modal-filter.html +++ b/modal-filter.html @@ -500,7 +500,7 @@

Фильтры

-
+

ДЛЯ КОГО

@@ -525,7 +525,7 @@
-
+

ТИП ПРОДУКЦИИ

@@ -557,7 +557,7 @@
-
+

ВКУС

diff --git a/product.html b/product.html index e93bb61..bb0735f 100644 --- a/product.html +++ b/product.html @@ -287,7 +287,7 @@
-
+

ОПИСАНИЕ

@@ -299,7 +299,7 @@
-
+

СОСТАВ

@@ -311,7 +311,7 @@
-
+

РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ

@@ -362,7 +362,7 @@
-
+

РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ

@@ -424,78 +424,95 @@
-
-
-
- Распродажа % -
-
-
- +
+

+ вашему питомцу может понравиться +

+ +
+ + +
-
-
-
Индейка
-
Индейка
+
+
+
+
+
+ Распродажа % +
-

Сухой корм, для средних и крупных пород, 2 кг.

-

- 1 304 -

-
- +
+
-
-
-
-
-
- Распродажа % +
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
-
- -
-
-
-
Индейка
-
Индейка
+
+
+
+ Распродажа % +
-

Сухой корм, для средних и крупных пород, 2 кг.

-

- 1 304 -

-
- +
+
-
-
-
-
-
- Распродажа % +
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +
-
- -
-
-
-
Индейка
-
Индейка
+
+
+
+ Распродажа % +
-

Сухой корм, для средних и крупных пород, 2 кг.

-

- 1 304 -

-
- +
+ +
+
+
+
Индейка
+
Индейка
+
+

Сухой корм, для средних и крупных пород, 2 кг.

+

+ 1 304 +

+
+ +