Personal Toggle icon on click

by panchroma

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<p>closed by default</p>
<p>to open by default, remove the style display:none. Works well in full screen</p>

<div id="weather">
      <h4 class="btn" ><i class="icon-chevron-right"></i> Weather</h4>
      <li class="entries" style="display: none;">Humidity
        <span  class="temperature">Temperature</span>
        <span class="wind-speed">Wind Speed</span>
      </li>
  </div>

JavaScript

$('#weather h4').click(function (){
        $('#weather .entries').toggle();
        $(this).find('i').toggleClass('icon-chevron-right icon-chevron-down', 200);
    });