FAQ Accordion Card (CSS Grid, Bootstrap)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Just to say that this is a really great solution^^. Both desktop and mobile view looks really great and it is responsive.

  You don't. Bootstrap is too much for a single component, better to just use css/scss on this one and I don't really use bootstrap so I kind of just respond with a no :>

  Some other little suggestions would be:

  • Those aren't really articles at all and just a simple accordion hence using heading tags for those aren't really suited. Using ul on this would be fine so that users will know how many accordion items in this FAQ section.
  • You don't need to label those container via aria-labelledby since those only works with sectioning elements like section and others. Also it would be better to just it div.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Ben•770

  @BenConfigPosted about 3 years ago

  @pikamart Hey, thanks for your comments. They are always so helpful and insightful.

  I would prefer to use plain CSS, but Bootstrap is still often mentioned on job specifications, so I feel I ought to practise using it occasionally.

  I used an article tag for each accordion item, but I can now see this is wrong as they aren't 'independent items of content'. As you say, a ul would make sense here and each accordion item can be a li.

  The h2s and aria-labelledby attributes (in fact all the attributes used in the accordion) belong to Bootstrap's accordion which I have copied and pasted into my project.

  What did you mean by "Also it would be better to just it div"? Do you mean replace the h2s with divs? I was thinking of removing those containers entirely.

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @BenConfig Hey, great that you find it useful^^

  Sorry for the confusion :>>, what I meant was, since I implied that aria-labelledby only works sectioning elements, you don't need to use that attribute on the div which you are using right now and just use simply a div without the attribute.

  0