JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="row-fluid">
        <div class="span3">
            <ul class="nav nav-list agents-sidenav">
                <a href="#"><i class="icon-chevron-right"></i>ABC Company, Mangalore</a>
                <div class="show-hide">
                    <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
                               ...

CSS

.agents-sidenav {
    margin-bottom:20px;
  padding: 0;
  background-color: #fff;

  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.agents-sidenav >li {
    position:relative;
}
.agents-sidenav > li {
    
}
.agents-sidenav > li > a {
  display: block;
  width: 190px \9;
  margin: 0 0 -1px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5;
}
.agents-sidenav > .active > a {
  position: relative;
  z-index: 2;
  padding: 9px 15px;
  border: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.agents-sidenav .icon-chevron-right {
  float: right;
  margin-top: 2px;
  margin-right: -6px;
  opacity: .25;
}
.agents-sidenav > li > a:hover {
  background-color: #f5f5f5;
}
.agents-sidenav a:hover .icon-chevron-right {
  opacity: .5;
}
.agents-sidenav .active .icon-chevron-right,
.agents-sidenav .active a:hover .icon-chevron-right {
  opacity: 1;
}

.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, .toggle-container .toggle-header .arrow {
    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");
    });
});