Bootstrap collapse: Change display of icons and text

I have a button set up to expand and collapse content. I want the button to change, based on whether the content is expanded or collapsed. I have the "More Info/Less Info" button working, but the nav hamburger icon changes when the "More Info" button is clicked. How do change one button without changing them all?

by Damith Nuwan Sampath

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="wrapper">
<div class="navbar navbar-inverse ">
    <div class="container">
        <div class="navbar-header">
            <button type="button" id="hamburger" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button> <a class="navbar-brand" href="#">Bootstrap 3.0 Skeleton</a>

        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#about">About</a>
                </li>
                <li><a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>




<!-- Collapse section -->
    <h4> Click the button to see more info </h4>
<div id="about" class="collapse" >
As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.         
</div>

<button type="button" id="more" class="btn visible-xs" data-toggle="collapse" data-target="#about">
<span class="glyphicon glyphicon-chevron-down"></span> More Info
</button>
</div>

CSS

.wrapper {
    width:90%;
    margin-right: auto;
    margin-left: auto;
}

JavaScript

$('#more').click(function () {
if($('button span').hasClass('glyphicon-chevron-down'))
{
    $('#more').html('<span class="glyphicon glyphicon-chevron-up"></span> Less Info'); 
}
else
{      
    $('#more').html('<span class="glyphicon glyphicon-chevron-down"></span> More Info'); 
}
});