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

Author: shubhIam-dev

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,11 +11,12 @@
     <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>