CSS Flex, Grid + JS (JQery code)

Hey @neuyann,

Nice job on finishing this challenge especially with it being the first one you used Javascript on!

If you check out jQuery, I would suggest you keep working on learning vanilla Javascript as well. Yes jQuery is easier, but the better you know vanilla Javascript, the easier jQuery will be to use, and you will be able to do things people who only know how to use jQuery won't be able to do. ;)

As for the Javascript, have you heard about event listeners? If not I would suggest you look into them, as I was able to complete the challenge with the following Javascript.

`const faqs = document.querySelectorAll(".faq-card__text__container");

faqs.forEach((faq) => { faq.addEventListener("click", () => { faq.classList.toggle("active"); }); });`

copy and pasting this into your project wouldn't work, as my html is structured differently. However I'd be happy to help find some good places to learn more about event listeners, how they work and what not. Feel free to check out my solution to the project, and compare. :)

My Solution

Keep up the great work!

Have you tried using jQuery. It's much easier than vanilla JavaScript. For example if you want the paragraph to display on click:

HTML:

<div class ="first-paragraph"> <div class="first-heading> <p> your heading to be clicked on</p> </div> <div class="inner-content> <p> paragraph to show or hide on click</p> </div> </div>

JavaScript:

$(document).ready(function (){ // Click on the heading to perform a function $('.first-heading').click(function (){

// Will slide the content up or down when clicked once $('.inner-content').slideToggle(); });

})

I hope this is helpful?