Twitter bootstrap collapse: change display of toggle button

Question

I am using Twitter Bootstrap to create collapsible sections of text. The sections are expanded when a + button is pressed. My html code as follows:

<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> 

Is there a way to change the button to display - instead of + after the section is expanded (and change back to + when it is collapsed again)?

Additional information: I hoped there would be a simple twitter-bootstrap/css/html-based solution to my problem. All responses so far make use of JavaScript or PHP. Because of this I want to add some more information about my development environment: I want to use this solution inside a SilverStripe-based (version 3.0.5) website which has some implications for the use of both PHP as well as JavaScript.

Answer 1

try this. http://jsfiddle.net/fVpkm/

Html:-

<div class="row-fluid summary">     <div class="span11">         <h2>MyHeading</h2>       </div>     <div class="span1">         <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> 

JS:-

$('button').click(function(){ //you can give id or class name here for $('button')     $(this).text(function(i,old){         return old=='+' ?  '-' : '+';     }); }); 

Update With pure Css, pseudo elements

http://jsfiddle.net/r4Bdz/

Supported Browsers

button.btn.collapsed:before {     content:'+' ;     display:block;     width:15px; } button.btn:before {     content:'-' ;     display:block;     width:15px; } 

Update 2 With pure Javascript

http://jsfiddle.net/WteTy/

function handleClick() {     this.value = (this.value == '+' ? '-' : '+'); } document.getElementById('collapsible').onclick=handleClick;