FAQ Accordion solution

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 6 months ago

  Hello Andrine, congrats for concluding this project.

  I was writing here but noticed the text was getting very long and cluttered, so I opted to send everything I had to say to your GitHub issues. Here's a link to access it: GH Issues

  There, I answered your questions and redid a part of your project.

  Marked as helpful

  0

  ---

  

  Andrine Camu•60

  @andzz-zzPosted 6 months ago

  @R3ygoski Thank you so much for your feedback! I thought I would need longer code for the js but turns out it's not! I will study the code you provided and apply it on my future projects!!

  1
• 

  P

  Justin Green•2,770

  @jgreen721Posted 6 months ago

  Nice work. The size and centering of everything looks good!

  So, there is a .querySelectorAll() that is good for when you want to grab more than one element. You targeted the ID which is obviously going to(should) be unique for each one but if you give them a shared classname or even .querySelectorAll("button") will work but that will grab all the buttons on the page so a shared classname is a pretty good approach. This in return though will give you an Array (like object) so you will then have to iterate through and attach your function to each one. Easier done than it sounds.

  Example:

     var btns = document.querySelectorAll('.yourBtnClassName`)
   // theres a few ways to iterate through but this is pretty clean
     btns.forEach((button,index)=>{
              button.onclick = showMore()
  })   
  
  

  Now from there, all the buttons will have the showMore() function assigned to it and should toggle that same top answer so there is still some work to do but that .querySelectorAll() should hopefully add a new tool in your JS-ing. You can obviously use it on your answer sections as well and then from there maybe tracking what number (which is what index is by the way -- when you loop through something you get A) the item and B) the number/order in the list of which it is -- starts at 0,1,2,3...) button was clicked with what answer section to change your display on (2nd btn click, change 2nd answer section,etc). lol. Sorry. I know that was kind of a lot but if any of it makes sense or is helpful then! lol.

  So far as the other tools, never hurts to explore but like with anything, the fundamentals will always be pretty helpful in the long run of understanding/ability. Sass/CSS may be a bit more forgivable but Id encourage some time with vanillaJS. Again, nice work and Happy <coding/> 🙂

  Marked as helpful

  0

  ---

  

  Andrine Camu•60

  @andzz-zzPosted 6 months ago

  @jgreen721 Thank you so much this is really helpful! I'm familiar with document.querySelectorAll() but was having trouble how to iterate on each so I will definitely be learning about how to access each button with index!

  1