Question

I have a working toggle spoiler – thanks for adrian for the code.
It closes instantly when opening another spoiler.

I added a plus image on the right, and i want the plus change into minus a image once opened and then change back to plus once closed or switched spoiler.

This is what I have currently:

http://justxp.plutohost.net/slyfiles/index.html

How do i make the plus image turn into a minus image on spoiler toggle and change back on spoiler toggle close?

My codes:

 <div id="spoiler1" data-hidden="hide1" class="spoiler"><span class="featurelist_2-text-margin">Networks</span><div id="plus"><img src="http://cdn4.iconfinder.com/data/icons/iconic/raster/12/plus.png"></div>
 </div>
<div id="hide1" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more. 
We do a SQL backup every hour to protect us from our data being lost.</p></div>

<div id="spoiler2" data-hidden="hide2" class="spoiler"><span class="featurelist_2-text-margin">Payment Avarge</span></div>
<div id="hide2" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more. 
We do a SQL backup every hour to protect us from our data being lost.</p></div>


<div id="spoiler3" data-hidden="hide3" class="spoiler"><span class="featurelist_2-text-margin">Control Panel - SlyPanel</span></div>
<div id="hide3" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more. 
We do a SQL backup every hour to protect us from our data being lost.</p></div>

<div id="spoiler4" data-hidden="hide4" class="spoiler"><span class="featurelist_2-text-margin">Security</span></div>
<div id="hide4" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more. 
We do a SQL backup every hour to protect us from our data being lost.</p>
</div> 

JS:

<script>
$('.spoiler').click(function() {
    var hiddenid = $(this).data('hidden');
    $('#' + hiddenid).slideToggle();
    $('.hide:not(#' + hiddenid + ')').slideUp();
});
</script>

CSS

.featurelist_2-text-margin{
    margin-top: 10px;
    position: absolute;
    margin-left: 20px;
    text-align: left;
    color: #259acb;
}

.spoiler {
        font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
                margin-top: 3px;
                cursor: pointer;
                    min-width: 511px;
                        position: relative;
}

.hide{
    font-size: 15px;
    background-color: #dedede;
    border: 1px solid #c1c1c1;
    width: 530px;
    height: auto;
    color: #262626;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
                margin-top: 3px;
    display: none;
}

#plus {
float: right;
margin-top: 17px;
margin-right: 10px;
}

Hide1,2,3,4 are empty.

Live preview: http://justxp.plutohost.net/slyfiles/index.html

Thanks!

Answer 1

Try this..

$('.spoiler').click(function() {
    var hiddenid = $(this).data('hidden');
    $('#' + hiddenid).slideToggle();
    $('.hide:not(#' + hiddenid + ')').slideUp();

    var $img = $(this).find('img');
    if( $img.attr('src').indexOf('plus') > -1){

       $img.attr('src', 'http://cdn4.iconfinder.com/data/icons/iconic/raster/12/minus.png')
    }
    else{
       $img.attr('src', 'http://cdn4.iconfinder.com/data/icons/iconic/raster/12/plus.png')
    }

});

I am assuming the src of the images to end with plus.png and minus.png