SO - 18942835

by Arun P Johny

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

jQuery(function ($) {
    var $heads = $(".toggle-container .toggle-header");
    $heads.click(function () {
        var $this = $(this);
        $this.find('i').toggleClass('icon-chevron-sign-down icon-chevron-sign-up');
        $this.next().slideToggle("slow");
    });
});