Skip to content
Submitted over 3 years ago

Faq Accordion Card Main Solution(By HTML, CSS, JS)

Chinmay Agarwal•235
@chinmayagarwal3007
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

Hello 👋!

So, this was my first JS challenge. I have so many doubts which I will really appreciate if you can help me find answers

. I am not able to fix the image at the right position in mobile user interface and how to give that shadow effect under the image.

. I am unable to figure out how to put all down arrows in one line.

. Paragraphs are showing orange color on hover only before they are clicked once they are clicked this hover property is disabled please tell me the reason of that.

. Finally, I think my JavaScript code is too long, so is there any modifications that I can make?

Please help!!!

Community feedback

  • Ahmed Melfay•115
    @ahmedmelfayPosted over 3 years ago

    document.getElementById("d2").getElementsByTagName("p")[0].style.color = "black"; document.getElementById("d2").getElementsByTagName("p")[0].style.fontWeight = "700";

    javascript applies the styling inside of your html therefore overwriting your css and giving your p[0] color of black and font weight of 700

    1
  • Ahmed Melfay•115
    @ahmedmelfayPosted over 3 years ago

    For the arrows issue, you can make a container div which has the 2 divs inside 1 for the question and 1 for the arrow. give the parent container div display:flex; justify-content:space-between;

    and viola.

    As for the click problem, im sure its an issue with your js, try using css instead, for example you can use .p1{ transition: color 0.3s; } .p1:hover{ color: orange; }

    You can also add 'cursor:pointer;' to your p1 class for better UX, to make it look like its actually clickable.

    1
    Chinmay Agarwal•235
    @chinmayagarwal3007Posted over 3 years ago

    Thanks!!!

    So, I worked on the suggestions given by you and it get my problems fixed.

    I will really appreciate if you can give me the solution of problems related to position of image..

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    maybe this will help you https://itnext.io/5-ways-to-loop-over-dom-elements-from-queryselectorall-in-javascript-55bd66ca4128

    1

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