easy show hide divs

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="toggle-container">
    <div class="toggle-header"> <span id="ContentPlaceHolder1_lblHeader1" class="header-text red">Abc Company</span>
 <span class="pull-right arrow"><i class="icon-chevron-sign-up"></i></span>

        <div class="clearfix"></div>
    </div>
    <div class="toggle-content">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th scope="col">City</th>
                    <th scope="col">Commodity</th>
                    <th scope="col">Brands</th>
                    <th scope="col">Description</th>
                    <th scope="col">Minimum Rates</th>
                    <th scope="col">Maximum Rates</th>
                </tr>
                <tr>
                    <td>Gadag</td>
                    <td>Gram</td>
                    <td>General</td>
                    <td>100kg</td>
                    <td>2210</td>
                    <td>3350</td>
                </tr>
                <tr>
                    <td>Gadag</td>
                    <td>Gram</td>
                    <td>General</td>
                    <td>100kg</td>
                    <td>2210</td>
                    <td>3350</td>
                </tr>
                <tr>
                    <td>Gadag</td>
                    <td>Gram</td>
                    <td>General</td>
                    <td>100kg</td>
                    <td>2210</td>
                    <td>3350</td>
                </tr>
                <tr>
                    <td>Gadag</td>
                    <td>Gram</td>
                    <td>General</td>
                    <td>100kg</td>
                    <td>2210</td>
                    <td>3350</td>
                </tr>
                <tr>
                    <td>Gadag</td>
                    <td>Gram</td>
                    <td>General</td>
                    <td>100kg</td>
    ...

CSS

.toggle-container {
     margin-bottom: 12px;
     border: 1px solid #ccc;
 }
 .toggle-container .toggle-header {
     padding: 5px 10px;
     background: #ddd;
     cursor:pointer;
 }
 .toggle-container .toggle-header .header-text {
     font-size: 18px;
     line-height: 24px;
 }
 .toggle-container .toggle-header .header-text.red {
     color: red;
 }
 .toggle-container .toggle-header .header-text.orange {
     color: #f60;
 }
 .toggle-container .toggle-header .header-text.green {
     color: green;
 }
 .toggle-container .toggle-content {
     margin-top: -1px;
     padding: 10px 15px;
     display: none;
 }

JavaScript

$(function () {
     var myHead = $(".toggle-container").find(".toggle-header");
     $(myHead).click(function () {
     var myBody = $(this).parent().find(".toggle-content");         
         console.log('yes');
         if ($(myBody).css('display') === 'none') {
             $(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
             $(this).parent().find(".toggle-content").slideDown("slow");
         } else if ($(myBody).css('display') === 'block') {
             $(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
             $(this).parent().find(".toggle-content").slideUp("slow");

         };
     });
 });