Toggle Active Class -- LIst group

Dynamically toggle list group active class in bootstrap using jquery

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
  <title>Twitter Bootstrap : List Groups</title>
<body>
<div class="bootstrap-demo">
 <ul class="list-group">
 <li class="list-group-item">ASIA</li>
      <li class="list-group-item">Europe</li>
      <li class="list-group-item">Africa</li>
      <li class="list-group-item">South America</li>
      <li class="list-group-item">North America</li>
    </ul>
 </div>
  <script>

  </script>
</body>

CSS

.bootstrap-demo{margin:30px;}

JavaScript

$(function(){
      $(".list-group-item").click(function(){        
        $(".list-group li").removeClass("active"); 
          $(this).addClass("active");        
      });
    });