CSS Flex, Grid + JS (JQery code)

Community feedback

• 

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 years ago

  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!

  Marked as helpful

  0
• 

  Okechukwu Victor chiedozie•580

  @covstarPosted over 2 years ago

  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?

  0

  ---

  

  Yann•190

  @neuyannPosted over 2 years ago

  @covstar Thanks for your advice, I'll check jQuery so :) .

  0