I have created a set of questions and answers, next to each question is an img I'm trying to toggle the src of that image whenever someone clicks on a question. So far, because the questions are stored in a nodelist, I managed to get the images to toggle but it toggle all of them, I just want the question that I clicked on to toggle the image stored inside.
let returnContent = [{
question: "How do I return an item?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "NEW! Instant Returns with InPost Lockers",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "What happens if I miss my delivery?",
icon: "https://via.placeholder.com/50x50",
answer: "Our carrier delivers between 9am and 10pm, which may vary depending on the service selected and a signature is required. <br> There are a number of options available if you think you won't be in to sign for your order. We'll pass your e-mail address and mobile number (if provided) to Hermes or DPD and they'll provide you with information about your delivery by e-mail or text message the evening before. <br> Please note deliveries outside of the UK can take anything up to 10 days. Follow your order using the tracking link in your despatch email to check if any delivery attempt has been made.",
},
{
question: "Can I track my delivery?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "Do I pay customs or import charges?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "Can I change my address after ordering?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "Is the site secure?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
]
jQuery($ => {
let questionHtml = returnContent.map(obj => `<div class="question-container"><div class="questions"> <a onclick=""><h3>${obj.question}</h3></a><img src="${obj.icon}" class="toggle-icon"></div><div class="answer" hidden><p>${obj.answer}</p></div></div>`).join('');
$('#Returns').append(`<div class="returnsWrapper">${questionHtml}</div>`);
$('.questions').on('click', e => $(e.currentTarget).next('.answer').toggle());
let plus = "https://via.placeholder.com/50x50";
let minus = "https://via.placeholder.com/100x50";
$('.questions').on('click', () => {
if($('.toggle-icon').attr('src') === plus) {
console.log('hello')
$('.toggle-icon').attr('src', minus)
}else {
$('.toggle-icon').attr('src', plus)
}
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="Returns">
<div class="title-container">
<p>Returns</p>
</div>
</div>