├── .gitignore └── accordion-1 ├── index.html ├── main.js └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /accordion-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Accordion 1 7 | 8 | 9 | 13 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |

What is HTML?

24 | expand_more 25 |
26 |
27 |

28 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae 29 | quaerat atque eos, et recusandae quas voluptatem repellendus? Ullam, 30 | expedita? Sapiente molestias tenetur illo ex libero consectetur. 31 | Fugit labore similique temporibus. 32 |

33 |
34 |
35 |
36 |
37 |

What is CSS?

38 | expand_more 39 |
40 |
41 |

42 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe 43 | consequatur nisi, itaque, voluptas quos, alias molestiae odio 44 | laboriosam incidunt rerum dicta dolorem minima repellat nostrum 45 | vitae! Repellat obcaecati sint cum! 46 |

47 |
48 |
49 |
50 |
51 |

What is JavaScript?

52 | expand_more 53 |
54 |
55 |

56 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe 57 | consequatur nisi, itaque, voluptas quos, alias molestiae odio 58 | laboriosam incidunt rerum dicta dolorem minima repellat nostrum 59 | vitae! Repellat obcaecati sint cum! 60 |

61 |
62 |
63 |
64 |
65 |

What is ES6?

66 | expand_more 67 |
68 |
69 |

70 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe 71 | consequatur nisi, itaque, voluptas quos, alias molestiae odio 72 | laboriosam incidunt rerum dicta dolorem minima repellat nostrum 73 | vitae! Repellat obcaecati sint cum! 74 |

75 |
76 |
77 |
78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /accordion-1/main.js: -------------------------------------------------------------------------------- 1 | const toggleItem = (element) => { 2 | const headers = document.querySelectorAll("article header"); 3 | for (let header of headers) { 4 | header.classList.remove("active"); 5 | header.nextElementSibling.style.height = "0px"; 6 | } 7 | 8 | element.classList.add("active"); 9 | 10 | const content = element.nextElementSibling; 11 | 12 | const text = content.querySelector("p"); 13 | 14 | content.style.height = `${text.clientHeight}px`; 15 | }; 16 | -------------------------------------------------------------------------------- /accordion-1/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: grid; 4 | place-items: center; 5 | height: 100vh; 6 | color: rgb(255 255 255 / 90%); 7 | background: #606080; 8 | font-family: "Euclid Circular A", "Poppins"; 9 | } 10 | 11 | article { 12 | background: #494964; 13 | width: 400px; 14 | padding: 20px; 15 | border-radius: 10px; 16 | display: grid; 17 | gap: 10px; 18 | } 19 | 20 | article header { 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | height: 48px; 25 | padding: 0 10px 0 20px; 26 | border-radius: 6px; 27 | cursor: pointer; 28 | background: #606080; 29 | color: #f8f8f8; 30 | } 31 | 32 | article header.active { 33 | background: #5c60ff; 34 | } 35 | 36 | article header.active span { 37 | rotate: -180deg; 38 | } 39 | 40 | article h2 { 41 | margin: 0; 42 | font-size: 16px; 43 | font-weight: 500; 44 | } 45 | 46 | article p { 47 | margin: 0; 48 | padding: 20px 10px; 49 | line-height: 1.7; 50 | font-size: 14px; 51 | } 52 | 53 | article span { 54 | transition: 0.3s; 55 | } 56 | 57 | article header ~ div { 58 | position: relative; 59 | height: 0; 60 | overflow: hidden; 61 | transition: height 0.5s ease; 62 | } 63 | --------------------------------------------------------------------------------