FAQ accordion card mobile first, no javascript!.

Community feedback

• 

  Agata Liberska•4,075

  @AgataLiberska

  Posted about 4 years ago

  Hi @Foued80, nice work on this challenge, especially positioning images! Some things need adjustments though - have a look at the mobile layout on smaller viewports (there really should be some space between the edge of the viewport and the card), as well as what happens when you toggle all questions on desktop layout - the heading is overflowing slightly. I would also change the transition time: 1.5s is way too long in my opinion, 0.5 would be more than enough.

  Also, I'm not sure about the checkbox hack. Have a look at the report - your HTML is not validating because <div>s are not allowed inside <label>. The div that contains the question text is completely unnecessary, just have the text on it's own - it's inside the <label> tag. I guess you could move the answer div outside the label and then use the adjacent sibling combinator + in your CSS to get your HTML to validate, something like this

  <li>
    <label for="toggle1">
       <input type="checkbox" id="toggle1">
       How many team members can I invite?
       <img class="arrow" src="images/icon-arrow-down.svg" alt="">
    </label>
    <div class="card_faq_a">
         You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
    </div>
  </li>
  

  However, this is also not very accessible. As you set input display: none, a user cannot use tab key to access the questions. You could correct that by hiding the input itself in an accessible way and adding some styles to the label when input is in focus (you could maybe use :focus-within pseudoselector). It would work better but could still be confusing to screen reader users.

  If you really want to avoid JS, you could look into using details and summary HTML elements but there are some accessibility concerns there, too. It's definitely something worthwhile to research though :)

  Hope this helps, let me know if you have any questions!

  00

  Marked as helpful
• 

  Foued•655

  @Foued80

  Posted about 4 years ago

  Thank you for the feedback, here what i fixed :

  • Mobile display down to 320px.
  • LABEL html validation issue:

  <li>
              <input type="checkbox" id="toggle1" />
              <label for="toggle1">How many team members can I invite?</label>
  
              <img class="arrow" src="images/icon-arrow-down.svg" alt="" />
              <div class="card_faq_a">
                You can invite up to 2 additional users on the Free plan. There is
                no limit on team members for the Premium plan.
              </div>
            </li>
  

  • Lowered transition to 0.5s;

  On desktop view :

  • Added shadow to the box and fixed the positioning;
  • Reduced font-size, paddings and margins to fix the accordion display when fully expanded;
  • Added hover effect on questions (color, cursor)

  00