diff --git a/my code/12-faq-collapse/index.html b/my code/12-faq-collapse/index.html new file mode 100644 index 0000000..43811bf --- /dev/null +++ b/my code/12-faq-collapse/index.html @@ -0,0 +1,89 @@ + + + + + + + + 12 faq collapse + + + + + + + +
+

Frequently asked questions

+ +
+
+ Why shouldn't we trust atoms? + +
+
They make up everything.
+
+ + +
+
+ What do you call someone with no body and no nose? + +
+
+ nobody knows. +
+
+ +
+
+ What's the object-oriented way to become wealthy? + +
+
+ inheritance. +
+
+ +
+
+ How many tickles does it take to tickle an octopus? + +
+
+ ten-tickles. +
+
+ +
+
+ What is:1+1? + +
+
+ depends on who you are asking. +
+
+
+ + + + + \ No newline at end of file diff --git a/my code/12-faq-collapse/script.js b/my code/12-faq-collapse/script.js new file mode 100644 index 0000000..3394e9f --- /dev/null +++ b/my code/12-faq-collapse/script.js @@ -0,0 +1,15 @@ +const btns = document.querySelectorAll("button"); + +btns.forEach((btn) => { + let opened = false; + btn.addEventListener("click", (e) => { + console.log(e.path[3]); + + if (!opened) { + e.path[3].classList.add("active"); + opened = true; + } else { + e.path[3].classList.remove("active"); + } + }); +}); diff --git a/my code/12-faq-collapse/style.css b/my code/12-faq-collapse/style.css new file mode 100644 index 0000000..47bfff2 --- /dev/null +++ b/my code/12-faq-collapse/style.css @@ -0,0 +1,74 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: #eee; +} + +.container { + margin: auto; + margin-top: 100px; + display: grid; + grid-gap: 25px; + width: 700px; + font-family: sans-serif; + font-weight: 600; +} + +h1 { + text-align: center; +} + +.faq { + padding: 40px 30px; + border: 1px solid #000; + border-radius: 5px; +} + +.question { + display: flex; + justify-content: space-between; + align-items: center; +} + +.ques { + font-size: 22px; +} + +.btn { + background-color: unset; + border: unset; + font-size: 22px; +} + +.fa-chevron-down { + display: block; +} + +.fa-times { + display: none; +} + +.answer { + font-size: 20px; + font-weight: 300; + display: none; +} + +.faq.active { + background-color: #fff; +} + +.faq.active .btn .fa-chevron-down { + display: none; +} +.faq.active .btn .fa-times { + display: block; +} + +.faq.active .answer { + display: block; + margin-top: 20px; +}