Merge pull request #2053 from shubhIam-dev/shubh/fixfaq

allow FAQ items to be closed by switching from radio to checkbox input

Author: TusharKesarwani

Projects/FAQ Page/faq_page.css

@@ -37,6 +37,7 @@ body{
     display: flex;
     gap: 1rem;
     align-items: center;
+    margin-top: 10px;
     cursor: pointer;
 }
 
@@ -68,10 +69,16 @@ body{
     transform: rotate(135deg);
 }
 
-.stack input{
+/* .stack input{
     appearance: none;
+} */
+.stack input {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
 }
-
 .content{
     max-height: 0;
     overflow: hidden;

Projects/FAQ Page/faq_page.html

@@ -11,16 +11,17 @@
     <div class="container">
         <h1>Frequently Asked Questions</h1>
     <div class="stack">
-        <input type="radio" name="faq" id="faq1">
+        <input type="checkbox" name="faq" id="faq1">
         <label for="faq1">
             <h2>01</h2>
             <h3>How do I apply?</h3>
         </label>
+
         <div class="content"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis molestias consequatur, illo provident nostrum repellendus officia, laudantium magnam eius, libero eaque consectetur labore? Aspernatur laudantium rem iure optio commodi ea.</p></div>
     </div>
 
 <div class="stack">
-    <input type="radio" name="faq" id="faq2">
+    <input type="checkbox" name="faq" id="faq2">
     <label for="faq2">
         <h2>02</h2>
         <h3>How do I apply?</h3>
@@ -29,7 +30,7 @@ <h3>How do I apply?</h3>
 </div>
 
 <div class="stack">
-    <input type="radio" name="faq" id="faq3">
+    <input type="checkbox" name="faq" id="faq3">
     <label for="faq3">
         <h2>03</h2>
         <h3>How do I apply?</h3>
@@ -38,7 +39,7 @@ <h3>How do I apply?</h3>
 </div>
 
 <div class="stack">
-    <input type="radio" name="faq" id="faq4">
+    <input type="checkbox" name="faq" id="faq4">
     <label for="faq4">
         <h2>04</h2>
         <h3>How do I apply?</h3>
@@ -47,7 +48,7 @@ <h3>How do I apply?</h3>
 </div>
 
 <div class="stack">
-    <input type="radio" name="faq" id="faq5">
+    <input type="checkbox" name="faq" id="faq5">
     <label for="faq5">
         <h2>05</h2>
         <h3>How do I apply?</h3>