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

I found this question and answer helpful. I removed the parent() method and added an id to my + button to avoid changing other buttons when toggling +.

$('#more').click(function () {
if($('button span').hasClass('glyphicon-chevron-down'))
{
    $('#more').html(' Less Info'); 
}
else
{      
    $('#more').html(' More Info'); 
}
}); 

http://jsfiddle.net/maybolles/opbyvbv4/2/