diff --git a/Accordion/demo.html b/Accordion/demo.html
new file mode 100644
index 0000000..aeb628d
--- /dev/null
+++ b/Accordion/demo.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <!-- style -->
+ <link rel="stylesheet" href="style.css" />
+ <title>Accordion</title>
+ </head>
+ <body>
+ <main>
+ <!-- top heading -->
+ <h1>Frequently Asked Questions</h1>
+
+ <!-- accordion -->
+ <div class="accordion">
+ <!-- item 1 -->
+ <div class="accordion__item">
+ <div class="accordion__head">
+ <h2 class="accordion__title">What is Netflix?</h2>
+ <img class="accordion__icon" src="plus.svg" alt="icon" />
+ </div>
+ <div class="accordion__body">
+ <p class="accordion__line">
+ Netflix is a streaming service that offers a wide variety of
+ award-winning TV shows, movies, anime, documentaries and more – on
+ thousands of internet-connected devices.
+ </p>
+ <p class="accordion__line">
+ You can watch as much as you want, whenever you want, without a
+ single ad – all for one low monthly price. There's always
+ something new to discover, and new TV shows and movies are added
+ every week!
+ </p>
+ </div>
+ </div>
+
+ <!-- item 2 -->
+ <div class="accordion__item">
+ <div class="accordion__head">
+ <h2 class="accordion__title">How much does Netflix cost?</h2>
+ <img class="accordion__icon" src="plus.svg" alt="icon" />
+ </div>
+ <div class="accordion__body">
+ <p class="accordion__line">
+ Watch Netflix on your smartphone, tablet, Smart TV, laptop, or
+ streaming device, all for one fixed monthly fee. Plans range from
+ ₹ 149 to ₹ 649 a month. No extra costs, no contracts.
+ </p>
+ </div>
+ </div>
+ </div>
+ </main>
+
+ <!-- script -->
+ <script src="script.js"></script>
+ </body>
+</html>
diff --git a/Accordion/plus.svg b/Accordion/plus.svg
new file mode 100644
index 0000000..fba1859
--- /dev/null
+++ b/Accordion/plus.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="e164gv2o4 default-ltr-cache-1cuyn15 e1svuwfo1" data-name="Plus" alt=""><path fill-rule="evenodd" clip-rule="evenodd" d="M11 11V2H13V11H22V13H13V22H11V13H2V11H11Z" fill="#fff"></path></svg>
\ No newline at end of file
diff --git a/Accordion/script.js b/Accordion/script.js
new file mode 100644
index 0000000..ce32a8d
--- /dev/null
+++ b/Accordion/script.js
@@ -0,0 +1,15 @@
+function accordionClickHandler(i) {
+ const currentOpenedAccordion = document.querySelector(".accordion--open");
+ currentOpenedAccordion?.classList.remove("accordion--open");
+ const clickedAccordion = document.querySelectorAll(".accordion__item")[i];
+ clickedAccordion.classList.toggle("accordion--open");
+}
+
+window.onload = () => {
+ const accordionItem = document.querySelectorAll(".accordion__head");
+ accordionItem.forEach((item, i) => {
+ item.addEventListener("click", () => {
+ accordionClickHandler(i);
+ });
+ });
+};
diff --git a/Accordion/style.css b/Accordion/style.css
new file mode 100644
index 0000000..b6ab93b
--- /dev/null
+++ b/Accordion/style.css
@@ -0,0 +1,89 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ width: 100%;
+ height: 100vh;
+ color: white;
+ background-color: black;
+}
+
+main {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ gap: 0.5rem;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+h1 {
+ font-size: 2rem;
+ font-weight: 700;
+ text-align: center;
+}
+
+.accordion {
+ max-width: 1150px;
+ display: flex;
+ gap: 0.5rem;
+ padding: 1rem;
+ flex-direction: column;
+}
+
+.accordion__item {
+ background-color: #2d2d2d;
+}
+
+.accordion__head {
+ cursor: pointer;
+ padding: 1.5rem;
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid black;
+ transition: all 500ms;
+}
+
+.accordion__head:hover {
+ background: #404040;
+}
+
+.accordion__title {
+ font-size: 1.5rem;
+}
+
+.accordion__icon {
+ width: 2.25rem;
+ height: 2.25rem;
+ object-fit: contain;
+}
+
+.accordion__body {
+ padding: 2rem;
+ display: none;
+ gap: 1.5rem;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ transition: all 500ms;
+}
+
+.accordion__line {
+ font-size: 1.5rem;
+}
+
+.accordion--open .accordion__icon {
+ transform: rotateZ(45deg);
+}
+
+.accordion--open .accordion__body {
+ padding: 2rem;
+ visibility: visible;
+ display: flex;
+}