FAQ Accordion solution

Community feedback

• 

  Bernardo Poggioni•6,990

  @R3ygoski

  Posted about 1 year 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.

  01

  Marked as helpful
• 

  P

  Justin Green•2,960

  @jgreen721

  Posted about 1 year 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/> 🙂

  01

  Marked as helpful