Skip to content
Submitted 3 months ago

FAQs page

Rita Odoh•80
@OdohRita
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Uhm... i took up to 3 hrs doing this project. its the first time i am doing something like this using JavaScript. I am happy i didn't let fear stop me

What challenges did you encounter, and how did you overcome them?

I have this challenge with toggling between the two signs, minus and plus. I didnt even implement it. I need help on how to do it. Two, most of my code was a code along, i would like to really understand it.

What specific areas of your project would you like help with?

I need someone to help me understand this code that i have written

Community feedback

  • MikDra1•6,920
    @MikDra1Posted 3 months ago

    If you really want to know how to implement the whole faq accordion you can check my solution here:

    GitHub

    Page

    Marked as helpful
    0
  • MikDra1•6,920
    @MikDra1Posted 3 months ago

    Ok,

    So if I were you I'd have one image element that will change it's src attribute value in the JS

    If you find this comment useful please mark it as helpful 💗

    Here is how:

    HTML:

    <img class="img" src="./assets/images/icon-plus.svg"

    JS:

    const img = document.querySelector('.img');

let isOpen = false;

img.addEventListener('click', function()) {

if(!isOpen) {
img.src = "./assets/images/icon-minus.svg"
isOpen = true;
} else {
img.src ="./assets/images/icon-plus.svg"
isOpen = false;
}
}
    Marked as helpful
    0
    Rita Odoh•80
    @OdohRitaPosted 3 months ago

    thanks, ill see how it works for me @MikDra1

    0
  • MikDra1•6,920
    @MikDra1Posted 3 months ago

    Nice one @OdohRita😊

    If you want to implement the plus minus icon toggling I would suggest using the src property on the image in JavaScript as down here

    image.src = 'images/minus.jpeg'

    If you find this comment useful please mark it as helpful 💗

    If you have any more questions feel free to ask them ✉

    Good job and keep going 😉😊😁

    0
    Rita Odoh•80
    @OdohRitaPosted 3 months ago

    please can you explain further?@MikDra1

    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