add js to accordion

jamesjose03 · jamesjose03 · commit 6b622bd33d8e · 2020-10-18T13:28:22.000+05:30
diff --git a/css/accordion.css b/css/accordion.css
@@ -16,6 +16,7 @@
 .panel {
     padding: 0 18px;
     background-color: white;
-    display: none;
+    max-height: 0;
     overflow: hidden;
+    transition: max-height 0.2s ease-out;
   }
diff --git a/js/accordion.js b/js/accordion.js
@@ -0,0 +1,14 @@
+var acc = document.getElementsByClassName("accordion-jkj");
+var i;
+
+for (i = 0; i < acc.length; i++) {
+  acc[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var panel = this.nextElementSibling;
+    if (panel.style.maxHeight) {
+      panel.style.maxHeight = null;
+    } else {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    }
+  });
+}
diff --git a/pages/accordion.html b/pages/accordion.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" href="../css/style.css" />
     <link rel="stylesheet" href="../css/accordion.css" />
     <link rel="stylesheet" href="../css/cardcolor.css" />
-    <link rel="stylesheet" href="../css/assets/magic.css" />
+    <link rel="stylesheet" href="../css/assets/magic.css" /> 
   </head>
 
   <body>
@@ -60,17 +60,17 @@ <h3>Add your different Accordion</h3>
          
           <button class="accordion-jkj">Section 1</button>
           <div class="panel">
-            <p>Lorem ipsum...</p>
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores voluptates doloribus asperiores repellat quaerat illum ad enim minima eaque est!</p>
           </div>
           
           <button class="accordion-jkj">Section 2</button>
           <div class="panel">
-            <p>Lorem ipsum...</p>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate fugit voluptatibus accusamus non inventore laborum aliquam sint! Maxime, saepe repellendus!</p>
           </div>
           
           <button class="accordion-jkj">Section 3</button>
           <div class="panel">
-            <p>Lorem ipsum...</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus nulla laborum suscipit iusto obcaecati ipsam soluta, in sit iste temporibus?</p>
           </div> 
         
         </div>
@@ -103,5 +103,6 @@ <h2>
       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
     </footer>
     <script src="../js/index.js"></script>
+    <script src="../js/accordion.js"></script>
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@`
`16`	`16`	`.panel {`
`17`	`17`	`padding: 0 18px;`
`18`	`18`	`background-color: white;`
`19`		`- display: none;`
	`19`	`+ max-height: 0;`
`20`	`20`	`overflow: hidden;`
	`21`	`+ transition: max-height 0.2s ease-out;`
`21`	`22`	`}`