Estoy usando Twitter Bootstrap para crear secciones plegables de texto. Las secciones se expanden cuando un+ se presiona el botón Mi código html de la siguiente manera:

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

¿Hay una manera de cambiar el botón para mostrar- en lugar de+ después de que la sección se expanda (y cambie de nuevo a+ cuando se derrumba de nuevo)?

Información Adicional: Esperaba que hubiera una solución simple para mi problema basada en twitter-bootstrap / css / html. Todas las respuestas hasta ahora hacen uso de JavaScript o PHP. Debido a esto, quiero agregar más información sobre mi entorno de desarrollo: quiero usar esta solución dentro de un sitio web basado en SilverStripe (versión 3.0.5) que tiene algunas implicaciones para el uso de PHP y JavaScript.