FAQ Accordion with JavaScript

Solution retrospective
I would have to say I am most proud of figuring out the JavaScript. Understanding how to use forEach loops, swap images and use addEventListeners.
document.addEventListener('DOMContentLoaded', () => { const questions = document.querySelectorAll('.question'); questions.forEach((question, index) => { const answer = document.getElementById(`answer${index + 1}`); const icon = question.querySelector('.toggle-icon'); //hide all answers on load const toggleAnswer = () => { if (answer.style.display === 'none') { answer.style.display = 'block'; icon.src = 'https://github.com/myname/FAQ-Accordion/blob/main/assets/images/icon-minus.svg'; // Change to minus icon } else { answer.style.display = 'none'; icon.src = 'https://github.com/myname/FAQ-Accordion/blob/main/assets/images/icon-plus.svg'; // Change to plus icon } }; //swaps the icon and shows the answer when clicked question.addEventListener('click', toggleAnswer); //enter is pressed on the question the answer will toggle question.addEventListener('keydown', (event) => { if (event.key === 'Enter') { toggleAnswer(); } }); }); }); ### What challenges did you encounter, and how did you overcome them? One challenge I had was the path for swapping images in JavaScript will not display the images correctly in GitHub Pages. I had to retrieve the absolute path GitHub and use that in the JavaScript to get the images to render correctly. ### What specific areas of your project would you like help with? I think I figured out everything I needed to on my own with internet resources.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mandrisic
actually you shouldn't have used javascript at all for this project, beacuse the challenge was to create an accordion with HTML nad CSS. it's best to use only HTML and CSS when you can, you just complicated everything for yourself
- @craigwolfe
Actually I continued to have issues with the image. I thought I had a handle on it. But I realized it was still not correct.
document.addEventListener('DOMContentLoaded', () => { const questions = document.querySelectorAll('.question'); questions.forEach((question, index) => { const answer = document.getElementById(`answer${index + 1}`); const icon = question.querySelector('.toggle-icon'); //hide all answers on load const toggleAnswer = () => { if (answer.style.display === 'none') { answer.style.display = 'block'; icon.src = `${window.location.origin}/${FAQ-Accordion}/assets/images/icon-minus.svg`; // Change to minus icon } else { answer.style.display = 'none'; icon.src = `${window.location.origin}/${FAQ-Accordion}/assets/images/icon-plus.svg`; // Change to plus icon } }; //swaps the icon and shows the answer when clicked question.addEventListener('click', toggleAnswer); //enter is pressed on the question the answer will toggle question.addEventListener('keydown', (event) => { if (event.key === 'Enter') { toggleAnswer(); } }); }); });
${window.location.origin}/${FAQ-Accordion}/assets/images/icon-plus.svg
FAQ-Accordion is the name of my GitHub repo.
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