Question

Here is a JSBin: http://jsbin.com/ofusec/2/

When you open the DIV (Customize or Personalize) the function acts as it should, truncate the “+” and replace with a “-” symbol, however when a user closes the DIV the string is duplicated and placed in.

I would like the closing to act the same as the opening (truncate and replace last character)

Here is the code:

HTML:

<div id="customize" class="leftDiv">
    <span class="smallTitle"  onclick="toggle_expand('customizePort');">Customize Portfolio &nbsp;&nbsp;&nbsp;&nbsp; +</span><br />
    <div class="leftDivContent" id="customizePort">
    LAYOUT:<BR />
    NAVIGATION:<BR />
    BACKGROUND COLOR:<BR />
    FONT COLOR:<BR />
    </div>
</div>

<div id="personalize" class="leftDiv">
    <span class="smallTitle" onclick="toggle_expand('personalizePort');">Personalize Portfolio &nbsp;&nbsp; +</span><br />
    <div class="leftDivContent" id="personalizePort">
        HEADER IMAGE:<BR />
        ARTIST STATEMENT:<br />
        CONTACT INFORMATION:<br />
    </div>
</div>

JAVASCRIPT:

function toggle_expand(id){
    var e = document.getElementById(id);
    var text = $(e).siblings().text();
    if( $(e).css('display') === 'none' ){
        $(e).slideToggle('fast', function(){
            var newText = text.replace("+","-");
            $(e).siblings().text( newText );
        });
    } else {
        $(e).slideToggle('fast', function(){
            var newText = text.replace("-","+");
            $(e).siblings().text( newText );
        });
    }
}

Answer 1

this appears to have the effect you describe:

function toggle_expand(id){
    var e = document.getElementById(id);
    var text = $(e).siblings("span").text();
    if( $(e).css('display') === 'none' ){
        $(e).slideToggle('fast', function(){
            var newText = $(e).siblings().text( text.slice(0, -1)+"-" );
        });
    } else {
        $(e).slideToggle('fast', function(){
            text = $(e).siblings("span").text( text.slice(0, -1)+"+" );
        });
    }
}