js checkbox

assets/js/gp-main.js

@@ -1,40 +1,25 @@
 'use strict';
 
-function toggleOpenX(button, content, blockheight) {
-    let thisButton = document.querySelector(button), 
-        thisContent = document.querySelector(content),
-        thisBlockheight = document.querySelector(blockheight);
-
-    thisButton.onclick = function () {
-        let height = thisBlockheight.clientHeight;
-
-        if (!thisContent.classList .contains('open')) {
-            thisContent.style.height = `${height}px`;
-            thisContent.classList .add('open');
-        }else{
-            thisContent.style.height = null;
-            thisContent.classList .remove('open');
-        }
-    }
-}
-
-// header start
-toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
-toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
-
-// header end
-
-// lang start
-toggleOpenX('.lang__open','.lang__content','.lang__list');
-// lang end
-
-// toggle
-
-let toggles = document.querySelectorAll('.toggle');
-
-
-
-function open(mainElement, buttonElement ,widthElement, contentElement, close) {
+// function toggleOpenX(button, content, blockheight) {
+//     let thisButton = document.querySelector(button), 
+//         thisContent = document.querySelector(content),
+//         thisBlockheight = document.querySelector(blockheight);
+
+//     thisButton.onclick = function () {
+//         let height = thisBlockheight.clientHeight;
+
+//         if (!thisContent.classList .contains('open')) {
+//             thisContent.style.height = `${height}px`;
+//             thisContent.classList .add('open');
+//         }else{
+//             thisContent.style.height = null;
+//             thisContent.classList .remove('open');
+//         }
+//     }
+// }
+
+
+function toggleOpenX(mainElement, buttonElement ,widthElement, contentElement, close) {
     let elements = document.querySelectorAll(mainElement);
 
     elements.forEach(e => {
@@ -43,13 +28,18 @@ function open(mainElement, buttonElement ,widthElement, contentElement, close) {
             thisWidthElement = e.querySelector(widthElement),
             thisContentElement = e.querySelector(contentElement);
 
-        if (close == true) {
-            console.log(1);
-        }
-
         thisButtonElement.onclick = function (e) {
             let width = thisWidthElement.clientHeight;
 
+            if (close == true && !thisMainElement.classList.contains('active')) {
+                elements.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                        e.querySelector(contentElement).style.height = null
+                    }                    
+                })
+            }
+
             if (!thisMainElement.classList.contains('active')) {
                 thisContentElement.style.height = `${width}px`;
                 thisMainElement.classList.add('active');
@@ -62,4 +52,32 @@ function open(mainElement, buttonElement ,widthElement, contentElement, close) {
     });
 }
 
-open('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
+// header start
+// toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
+// toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
+// header end
+
+// lang start
+// toggleOpenX('.lang__open','.lang__content','.lang__list');
+// lang end
+
+// toggle
+toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
+// toggle
+
+// checkbox 
+let checkbox = document.querySelectorAll('.checkbox');
+
+checkbox.forEach(e => {
+    e.onclick = function (event) {
+        let input = e.querySelector('.checkbox__input');
+
+        if (!e.classList.contains('active')) {
+            input.checked = 1;
+        }else{
+            input.checked = 0;
+        }
+        e.classList.toggle('active');
+    }
+})
+// checkbox