<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <br /> <div class="container"> <a href="#" class="btn btn-lg btn-default">21-24</a> <a href="#" class="btn btn-lg btn-success">25-29</a> <a href="#" class="btn btn-lg btn-default">30-34</a> <a href="#" class="btn btn-lg btn-default">35-39</a> <a href="#" class="btn btn-lg btn-default">40-44</a> <br /> <a href="#" class="btn btn-lg btn-default">45-49</a> <a href="#" class="btn btn-lg btn-default">40-49</a> <a href="#" class="btn btn-lg btn-default">50-54</a> <a href="#" class="btn btn-lg btn-default">55-59</a> <a href="#" class="btn btn-lg btn-default">50-59</a> <br /> <a href="#" class="btn btn-lg btn-default">60-64</a> <a href="#" class="btn btn-lg btn-default">65-69</a> <a href="#" class="btn btn-lg btn-default">70-74</a> <a href="#" class="btn btn-lg btn-default">75-79</a> <a href="#" class="btn btn-lg btn-default">80-84</a> <br /> <a href="#" class="btn btn-lg btn-default">85-89</a> <a href="#" class="btn btn-lg btn-default">90+</a> <br /> </div> <br />

.btn.active { display: none; } .btn span:nth-of-type(1) { display: none; } .btn span:last-child { display: block; } .btn.active span:nth-of-type(1) { display: block; } .btn.active span:last-child { display: none; }