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

Responsive landing page using media query

P

@flaviare1s

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had a lot of difficulty doing it, as I'm still at the beginning of my JavaScript studies. I couldn't create a code that covered all the questions, I had to create separate ids. Can anyone help me and give me feedback? :)

Community feedback

@melkhateeb193

Posted

that a great job you have done you can make it shorter code you can give to the plus item same id or same class and use query selector all const faqItem = document.querySelectorAll('.faq-item'); like this faqItem.forEach(function(item) { const toggleContent = item.querySelector('.toggle-content'); const plus = item.querySelector('.plus'); const minus = item.querySelector('.minus');

plus.addEventListener('click',function(){ plus.classList.replace('d-block','d-none'); toggleContent.classList.replace('d-none', 'd-block') minus.classList.replace ('d-none', 'd-block') })

minus.addEventListener('click',function(){ plus.classList.replace('d-none', 'd-block'); toggleContent.classList.replace('d-block','d-none') minus.classList.replace ('d-block','d-none') }) }) that will work with you and with less could and keep going you have done a great job

Marked as helpful

0

P

@flaviare1s

Posted

@melkhateeb193 Thank you, Mostafa. I spent the morning trying to do this and I couldn't, but I'll try some more using your suggestion. Now I'm trying to put the transition, but I'm not succeeding.

0

@melkhateeb193

Posted

@flaviare1s if you need any help with this i could help we can enter a meeting and i will make it with u

0
P

@flaviare1s

Posted

@melkhateeb193 I would appreciate 😊

0

@melkhateeb193

Posted

@flaviare1s give me you instagram to schedule meeting or any other contacting platform

0
P

@flaviare1s

Posted

@melkhateeb193

My Instagram is @flaviare1s

0

@Ali-Developer-06

Posted

Hello Your work is good but you need to add transition for smooth opening answer and also when click on plus(+) icon then icon work also remain your work is good 😊

Marked as helpful

0

P

@flaviare1s

Posted

@Ali-Developer-06 Thanks for your feedback. 😄

0

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