Seller Deal Mode

by Ying Chor Ding

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="bs-example">
      <div class="panel-group" id="accordion">
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> Spot</a>
                  </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse">
                  <div class="panel-body">
                  <table class="spot">
                    <thead>
                      <tr>
                        <th>Company Name</th>
                        <th>Numbering</th>
                        <th>Period</th>
                        <th>Grade</th>
                        <th>Spec</th>
                        <th>Quantity(MT)</th>
                        <th>Enquiry Validity Timer</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="spot-button main-header-tr">
                          <td>BWOIL PTE LTD</td>
                          <td>EN1709080006</td>
                          <td>08-09-2017 ~ 09-09-2017</td>
                          <td>HSFO380</td>
                          <td>ISO 8217 2010</td>
                          <td>103.90</td>
                          <td>Expired on 31-10-2017<br /> 00:00:00(Asia/Singapore)</td>
                      </tr>
                      <tr class="hidden-row">
                          <td colspan="7">
                            <div class="row">
                              <div class="col-md-12 col-sm-12 col-xs-12">
                                <div...

CSS

* {
        margin: 0;
        padding: 0;
      }
    body {
        color: #73879C;
        background: #2A3F54;
        font-family: Arial,"Droid Sans",sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.471;
        width: 100%;
    }
    .set-row .col-xs-1,
.set-row .col-sm-1,
.set-row .col-md-1,
.set-row .col-lg-1,
.set-row .col-xs-2,
.set-row .col-sm-2,
.set-row .col-md-2,
.set-row .col-lg-2,
.set-row .col-xs-3,
.set-row .col-sm-3,
.set-row .col-md-3,
.set-row .col-lg-3,
.set-row .col-xs-4,
.set-row .col-sm-4,
.set-row .col-md-4,
.set-row .col-lg-4,
.set-row .col-xs-5,
.set-row .col-sm-5,
.set-row .col-md-5,
.set-row .col-lg-5,
.set-row .col-xs-6,
.set-row .col-sm-6,
.set-row .col-md-6,
.set-row .col-lg-6,
.set-row .col-xs-7,
.set-row .col-sm-7,
.set-row .col-md-7,
.set-row .col-lg-7,
.set-row .col-xs-8,
.set-row .col-sm-8,
.set-row .col-md-8,
.set-row .col-lg-8,
.set-row .col-xs-9,
.set-row .col-sm-9,
.set-row .col-md-9,
.set-row .col-lg-9,
.set-row .col-xs-10,
.set-row .col-sm-10,
.set-row .col-md-10,
.set-row .col-lg-10,
.set-row .col-xs-11,
.set-row .col-sm-11,
.set-row .col-md-11,
.set-row .col-lg-11,
.set-row .col-xs-12,
.set-row .col-sm-12,
.set-row .col-md-12,
.set-row .col-lg-12 {
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
}
.set-row.row, .set-row {
    margin-left: -5px;
    margin-right: -5px;
}
    .table-responsive {
      width: 100%;
      overflow-y: auto;
      _overflow: auto;
      margin: 0 0 1em;
      border: none;
    }
    .bs-example{
      margin: 0 auto;
      max-width: 1366px;
      padding: 0 2%;
    }
    .panel-title .glyphicon{
        font-size: 14px;
    }
    .spot {
      width: 100%;
    }
    .spot tr th,
    .spot tr td {
      border-bottom: 1px solid #dcdcdc;
      padding: 5px;
    }
    .spot tr th {
      background: #e6e8f0;
      color: #7e828c;
      font-size: 11px;
    }
    .spot tr td {
      font-size: 12px;
    }
   ...

JavaScript

$(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.in").each(function(){
        	$(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
        });
        
        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
        	$(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hide.bs.collapse', function(){
        	$(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
        
        $('.hidden-row').hide();
      $('.spot-button').click(function(){
        $('.hidden-row').hide();
        $(this).closest('.main-header-tr').nextUntil('.main-header-tr').slideToggle('active');
        if($('.active').length > 0){
            $('.active').removeClass('active');
        }
        $(this).toggleClass('active');
      });
    });