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 @@ + + + + + + + + Accordion + + +
+ +

Frequently Asked Questions

+ + +
+ +
+
+

What is Netflix?

+ icon +
+
+

+ 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. +

+

+ 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! +

+
+
+ + +
+
+

How much does Netflix cost?

+ icon +
+
+

+ 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. +

+
+
+
+
+ + + + + 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 @@ + \ 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; +}