JQuery Toggle Class Plus and minus icon issue

Question

I have Two Divs with popular and others, i'm using jquery toggleClass for slideUp and Slidedown between two div sections currently its working fine but when i click on popular div its showing the contents of popular contents but not changing its icon with minus to plus and plus to minus vice versa for both divs can somebody help me out in resolving it Thanks!

http://jsfiddle.net/v9Evw/352/

Html

<div id="popular">

    <div id="headerDivImg1" class="toggle1" id="popular_img" style='background:#4c97d0;height:30px;width:640px;'>
        <span style='color:#fff;padding-left:10px;line-height:30px;'>DIV1</span>
        <a class="toggle1" style='float:right;' id="popular_img" href="javascript:popular('popular_content', 'popular_img');">

        </a>
    </div>
    <div id="popular_content" class="content" style="display: block;">
        <p>welcome to Div1</p>
    </div>

</div>

<br/>

<div id="others">

    <div id="headerDivImg1" id="other_img" class="toggle2" style='background:#4c97d0;height:30px;width:640px;'>
        <span style='color:#fff;padding-left:10px;line-height:30px;'>DIV2</span>
        <a class="toggle2" style='float:right;' id="other_img" href="javascript:popular('popular_content', 'popular_img');">

        </a>
    </div>
    <div id="other_content" class="content" style="display: block;">
        <p>welcome to Div2</p>
    </div>

</div>

JQUERY

$(document).ready(function()
{
    var $content = $("#popular_content").show();
    $(".toggle1").on("click", function(e)
    {
        $(this).toggleClass("expanded");
        $content.slideToggle();
    });
});

$(document).ready(function()
{
    var $content = $("#other_content").hide();
    $(".toggle2").on("click", function(e)
    {
        $(this).toggleClass("expanded");
        $content.slideToggle();
    });
});

CSS

.toggle1
{
    display:inline-block;
    height:27px;
    width:41px;  background:url("minus.png");

}
.toggle1.expanded
{
    background:url("plus.png");
}


.toggle2
{
    display:inline-block;
    height:27px;
    width:41px;  background:url("plus.png");

}
.toggle2.expanded
{
    background:url("minus.png");
}

Answer 1

I think this might help

HTML

    <div class="div1container">
        <div class="glyphicon glyphicon-plus divcontainer" data-toggle="collapse" data-target="#demo">Div1</div>

    <div id="demo" class="collapse">
    Div 1 Content
    </div>
    </div>
    <div class="div2container">
    <div class="glyphicon glyphicon-plus divcontainer" data-toggle="collapse" data-target="#demo2">Div2</div>

    <div id="demo2" class="collapse">
    Div 2 Content
    </div>
        </div>

CSS

.divcontainer{
    background:aqua;
    width:100%
}

Jquery

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
});