Merge pull request #464 from partha120804/dropdown

FAQ page dropdown behaviour fixed

js/FAQs.js

@@ -1,62 +1,47 @@
-const img = document.querySelector(".images");
-const drop = document.querySelector(".drop");
-
-const img2 = document.querySelector(".images2");
-const drop2 = document.querySelector(".drop2");
-
-const img3 = document.querySelector(".images3");
-const drop3 = document.querySelector(".drop3");
-
-const img4 = document.querySelector(".images4");
-const drop4 = document.querySelector(".drop4");
+function toggle(drop, isExpanded) {
+    const img = drop.querySelector('img');
+    if (isExpanded) {
+        img.src="../assets/images/icon-minus.svg";
+    }else {
+        img.src="../assets/images/icon-plus.svg";
+    }
+}
 
-let toggle = true;
+//Drops and their default expansion values
+const drop1 =   document.querySelector(".drop1")  ;     let drop1isExpanded = false   ;
+const drop2 =   document.querySelector(".drop2")  ;     let drop2isExpanded = false   ;
+const drop3 =   document.querySelector(".drop3")  ;     let drop3isExpanded = false   ;
+const drop4 =   document.querySelector(".drop4")  ;     let drop4isExpanded = false   ;
+const drop5 =   document.querySelector(".drop5")  ;     let drop5isExpanded = false   ;
+const drop6 =   document.querySelector(".drop6")  ;     let drop6isExpanded = false   ;
 
 
-drop.addEventListener('click', function(){
-    toggle= !toggle;
-    if(toggle)
-    {
-        img.src="../assets/images/icon-plus.svg";
-    }
-    else
-    {
-        img.src="../assets/images/icon-minus.svg"
-    }
-})
+drop1.addEventListener('click', function(){
+drop1isExpanded = !drop1isExpanded;
+toggle(drop1, drop1isExpanded);
+});
 
 drop2.addEventListener('click', function(){
-    toggle= !toggle;
-    if(toggle)
-    {
-        img2.src="../assets/images/icon-plus.svg";
-    }
-    else
-    {
-        img2.src="../assets/images/icon-minus.svg"
-    }
-})
+drop2isExpanded = !drop2isExpanded;
+toggle(drop2, drop2isExpanded);
+});
 
 drop3.addEventListener('click', function(){
-    toggle= !toggle;
-    if(toggle)
-    {
-        img3.src="../assets/images/icon-plus.svg";
-    }
-    else
-    {
-        img3.src="../assets/images/icon-minus.svg"
-    }
-})
+drop3isExpanded = !drop3isExpanded;
+toggle(drop3, drop3isExpanded);
+});
 
 drop4.addEventListener('click', function(){
-    toggle= !toggle;
-    if(toggle)
-    {
-        img4.src="../assets/images/icon-plus.svg";
-    }
-    else
-    {
-        img4.src="../assets/images/icon-minus.svg"
-    }
-})
+drop4isExpanded = !drop4isExpanded;
+toggle(drop4, drop4isExpanded);
+});
+
+drop5.addEventListener('click', function(){
+drop5isExpanded = !drop5isExpanded;
+toggle(drop5, drop5isExpanded);
+});
+
+drop6.addEventListener('click', function(){
+drop6isExpanded = !drop6isExpanded;
+toggle(drop6, drop6isExpanded);
+});

pages/FAQs.html

@@ -36,8 +36,8 @@ <h1><img src="../assets/images/icon-star.svg" />FAQs</h1>
 
     <div class="question">
       <details>
-        <summary class="drop">
-          <img src="../assets/images/icon-plus.svg" class="images" /> How do I
+        <summary class="drop1">
+          <img src="../assets/images/icon-plus.svg"/>How do I
           win the game?
         </summary>
         <p>
@@ -52,7 +52,7 @@ <h1><img src="../assets/images/icon-star.svg" />FAQs</h1>
     <div class="question">
       <details>
         <summary class="drop2">
-          <img src="../assets/images/icon-plus.svg" class="images2" />How do I
+          <img src="../assets/images/icon-plus.svg"/>How do I
           set up the game?
         </summary>
         <p>
@@ -66,7 +66,7 @@ <h1><img src="../assets/images/icon-star.svg" />FAQs</h1>
     <div class="question">
       <details>
         <summary class="drop3">
-          <img src="../assets/images/icon-plus.svg" class="images3" />What
+          <img src="../assets/images/icon-plus.svg"/>What
           happens if I complete a box?
         </summary>
         <p>
@@ -80,7 +80,7 @@ <h1><img src="../assets/images/icon-star.svg" />FAQs</h1>
     <div class="question">
       <details>
         <summary class="drop4">
-          <img src="../assets/images/icon-plus.svg" class="images4" />When
+          <img src="../assets/images/icon-plus.svg"/>When
           does the game end?
         </summary>
         <p>
@@ -93,7 +93,7 @@ <h1><img src="../assets/images/icon-star.svg" />FAQs</h1>
     <div class="question">
       <details>
         <summary class="drop5">
-          <img src="../assets/images/icon-plus.svg" class="images5" />Is there
+          <img src="../assets/images/icon-plus.svg"/>Is there
           a strategy involved in playing this game?
         </summary>
         <p>
@@ -106,7 +106,7 @@ <h1><img src="../assets/images/icon-star.svg" />FAQs</h1>
     <div class="question">
       <details>
         <summary class="drop6">
-          <img src="../assets/images/icon-plus.svg" class="images6" />What if
+          <img src="../assets/images/icon-plus.svg"/>What if
           I need help or have more questions about gameplay?
         </summary>
         <p>