I'm new to jQuery. I made a list of toggle-able items where only is opened at a time. This works. However I want to change the img src plus/minus and I can't get it to work.
Any help would be greatly appreciated!
It's changing all the images to minus, not just the one opened and it's not chaning back to plus.
jQuery
$(document).ready(function(){
// Hide initially
$(".toggle-content").hide();
// Clicked
$(".toggle").click(function(){
// Show & change img
$(this).next(".toggle-content").slideToggle(400);
// Hide others
$(".toggle-content").not($(this).next(".toggle-content")).slideUp();
$(".toggle-img").not($(this).next(".toggle-img")).attr("src","https://i.imgur.com/k3mb7xV.png"); // <--- This is the problem
});
// Open first by default
//$(".toggle").prev(".toggle-content").show(400);
$(".toggle-content").first().show(100);
});
HTML
<div class="toggle"><img class="toggle-img" src="https://i.imgur.com/BhbAvx0.png" style="margin-right:5px; position:relative; top:8px" /> Link 1</div>
<div class="toggle-content">Content 1</div>
<div class="toggle"><img class="toggle-img" src="https://i.imgur.com/BhbAvx0.png" style="margin-right:5px; position:relative; top:8px" /> Link 2</div>
<div class="toggle-content">Content 2</div>
<div class="toggle"><img class="toggle-img" src="https://i.imgur.com/BhbAvx0.png" style="margin-right:5px; position:relative; top:8px" /> Link 3</div>
<div class="toggle-content">Content 3</div>