bootstrap collapse: change display of toggle button icons and text

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:

Demo link

Answer 1

use this javascript for changing icon

$(document).ready(function(){
    $("#demo").on("hide.bs.collapse", function(){
        $(".btn").html(' Open');
    });
    $("#demo").on("show.bs.collapse", function(){
        $(".btn").html(' Close');
    });
    $("#demo1").on("hide.bs.collapse", function(){
        $(".btn1").html(' Open');
    });
    $("#demo1").on("show.bs.collapse", function(){
        $(".btn1").html(' Close');
    });
});