FAQ accordion card | Html + Css + JS => open only one item

Community feedback

• 

  tdenis29•45

  @tdenis29Posted about 3 years ago

  Hey man it looks good but the inverted svg is giving a 400 error when I click on the tabs.

  I just did this for another challenge on this site. I used the <details> and <summary> tags built into html because it's more accessible from what I read, i dont actually know.

  I used an event listener on the summary element container then just inverted the svg and changed the color with combo classes. I had to give unique id to each summary element though.

  summary.addEventListener('click', (e) => { if(e.target.id === "details1"){ document.getElementById('detail1arrow').classList.toggle('flippy'); }

  svg.flippy { transform: rotate(180deg); }

  .flippy path { stroke: #fa5757; }

  0