Skip to content
Submitted about 3 years ago

Faq-Accordion-Card-Main: HTML5, CSS, Bootstrap, JS

Md Ajmal Shadab•410
@mdajmalshadab
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This was quite challenging for me, got some help from a youtube video for the accordian. Later I tried using JS for the desired result, and slideToggle() function helped me in achieving that. Please give feedbacks and help me improve further. Thank you.

Community feedback

  • Account deleted

    Hi,

    Your solution looks pretty good.

    • I am not sure how your Js code is 'cause I can't find it, but if you are adding a css class when you click on a tab you should set it to toggle, so it'll toggle between being active and inactive.

    You are already doing it, but with clicking on another tab, it's pretty much the same concept.

    Keep coding👍.

    Marked as helpful
    1
    Md Ajmal Shadab•410
    @mdajmalshadabPosted about 3 years ago

    @thulanigamtee Thanks , but I am not adding css class when clicking on a tab, I am using href (referenced to id of the div) and using :target in css section to open up the answer part of faq. I have tried using data-toggle:collapse attribute from bootstrap as well. But in the latter case I got new challenge(previous accordians were not closing on its own after opening the new one).

    0
    Md Ajmal Shadab•410
    @mdajmalshadabPosted about 3 years ago

    @thulanigamtee Thank you! I think I have solved the issue that I was facing.

    0

Please log in to post a comment

Log in with GitHub

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