jQuery Toggle list changing img src (Plus-Minus)

23 Views Asked by At

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>

Demo: https://jsfiddle.net/cqo2eh74/

0

There are 0 best solutions below