Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion - No JS

Restu Rizkiawanโ€ข 400

@masrestu

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

somaye beiranvandโ€ข 220

@somaye-beiranvand

Posted

Hi Restu๐Ÿ˜Š

Great job on the challenge๐Ÿ‘

One advice to improve your solution:

you can add best practice for menu using one line of jquery, when you click on a menu item the other one would get closed.

$(document).ready(function () {
  $("details").on("click", function () {
    $(this).siblings().removeAttr("open");
  });
});

Hope my feedback would be helpful, happy coding.๐Ÿ˜Š

Marked as helpful

0

Restu Rizkiawanโ€ข 400

@masrestu

Posted

@somaye-beiranvand Hi, thanks for the advice. Maybe I will add them for some other projects. But I prefer to use no JS on this challenge (it's a bonus, they said) ๐Ÿ˜Š .

1
somaye beiranvandโ€ข 220

@somaye-beiranvand

Posted

@masrestu

if you don't want to use JS you can add scroll bar to the faq part, so when opening the menus the pictures at the left side doesn't change, and your web page looks more professional.

Tho on my assumption the bonus was related to the use of summary and details instead of using JS for that part and for other things we could use JS, So added this line of code to my own project. ๐Ÿ˜ƒ

0
Restu Rizkiawanโ€ข 400

@masrestu

Posted

@somaye-beiranvand I will consider that for next challenges I take. Thanks again for the good advice! ๐Ÿ˜Š

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord