toggle js

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;

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

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) {

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 */
 }

assets/img/svg/main/arrow-left.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16.4854H28" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16.4854L14.4853 24.9706" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16.4854L14.4853 8.00007" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/svg/main/arrow-right.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 16.4854H4" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 16.4854L17.5147 24.9706" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 16.4854L17.5147 8.00007" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/js/gp-main.js

@@ -27,3 +27,39 @@ toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
 // lang start
 toggleOpenX('.lang__open','.lang__content','.lang__list');
 // 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);

modal-filter.html

@@ -500,7 +500,7 @@
                     <div class="modal__header">
                         <p class="modal__title">Фильтры</p>
                         <div class="modal__content">
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ДЛЯ КОГО
                                 </p>
@@ -525,7 +525,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ТИП ПРОДУКЦИИ
                                 </p>
@@ -557,7 +557,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ВКУС
                                 </p>

product.html

@@ -287,7 +287,7 @@
                     </form>
                     
                     <div class="detail__toggle">
-                        <div class="toggle active">
+                        <div class="toggle">
                             <p class="toggle__title">
                                 ОПИСАНИЕ
                             </p>
@@ -299,7 +299,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="toggle active">
+                        <div class="toggle">
                             <p class="toggle__title">
                                 СОСТАВ
                             </p>
@@ -311,7 +311,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="toggle active">
+                        <div class="toggle">
                             <p class="toggle__title">
                                 РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ
                             </p>
@@ -362,7 +362,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="toggle active">
+                        <div class="toggle">
                             <p class="toggle__title">
                                 РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ
                             </p>
@@ -424,6 +424,22 @@
                 </div>
 
                 <div class="detail__catalot">
+                    <div class="detail-catalot__header">
+                        <p class="detail-catalot__title">
+                            вашему питомцу может понравиться
+                        </p>
+
+                        <div class="detail-catalot__control">
+                            <button class="detail-catalot-control__button">
+                                <img src="assets/img/svg/main/arrow-left.svg" alt="">
+                            </button>
+
+                            <button class="detail-catalot-control__button">
+                                <img src="assets/img/svg/main/arrow-right.svg" alt="">
+                            </button>
+                        </div>
+                    </div>
+                    <div class="detail-catalot__content">
                         <div class="product__item">
                             <div class="product-item__label">
                                 <div class="product-item-label__tag product-item-label__tag--sale">
@@ -501,6 +517,7 @@
                         </div>
                     </div>
                 </div>
+            </div>
         </main>
 
         <footer class="footer">