<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bootstrap expand / collapse with plus and minus</h1>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-collapse-down"></span> Show
</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
<div>
<span>The rest of the page</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
$(function(){
$('#demo').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show');
})
$('#demo').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide');
})
})
/* Styles go here */