JSFiddle - React, Tailwind, and code Playground

by jc_garcia0527

HTML

<div id="wrapper"> 
      <div id="content">  
          <div class="demo">
            <h2>Quotation ID</h2>
            <h3 class="expand">
                123456
            </h3>
            <div class="collapse">
                <table align='center' border='1' class='display'>
					<thead>
						<th><input type='checkbox' onclick='checkall()' id='selectall'/></th>
						<th>Product Type</th>
						<th width='20px'>Product type code</th>
						<th width='20px'>Quantity</th>
						<th>Width</th>
						<th>Height</th>
						<th>Total Sub.</th>
					</thead>
					<tbody>
				
					
				<tr align='center'>
				    <td>

						<input type='checkbox' class='case' name='checkbox[]' value='id'></td>
	
							</td>
					<td>
                        sample prod			
					</td>
					<td>
                        sample code
                    </td>
					<td>
					    1
					</td>
					<td>
					    0.36
					</td>
					<td>
					    0.42
					</td>
					<td>
					    1000.00
					</td>
					</tr>
					
					<tr>
					<td></td><td></td><td></td><td></td><td></td>
							<td>
								<strong><b>Total:</b></strong>
					</td>
					<td>
								<font color='#900'><u><b>
                                    1000.00
                                    </b></u></font>
							</td>

					</tr>
					
					</tbody>
				</table>
            </div>
          </div>
        </div>
    </div>

CSS

#wrapper{
  margin:0 auto;
  padding:15px 15% 8em;
  text-align:left
}
#content {
  max-width:70em;
  width:100%;
  margin:0 auto;
  padding-bottom:20px;
  overflow:hidden
}
.demo {
  margin:0 15px;
  padding:0px 20px;
  position:relative;
  overflow:hidden;
  background-color: #FFFFFF;
  border-radius: 0px 0px 10px 10px;
}
.collapse p {padding:0 10px 1em}

.switch {position:absolute; top:-3px; right: 25px; padding:3px}

.post .switch {position:static; text-align:right}

.post .main{margin-bottom:.3em; padding-bottom:0}

.other li, .summary {margin-bottom:.3em; padding:1em; border:1px solid #e8e7e8; background-color:#f8f7f8}

.other ul {list-style-type:none; text-align:center}

/* --- Headings  --- */
h1 {
  margin-bottom:1em; 
  font-family:georgia,'times new roman',times,serif; 
  font-size:2.5em; 
  font-weight:normal; 
  color:#c30
}
h2 {margin-bottom:1em; padding:3px; background-color:#eee}
h2, h3{font-size:1em}

.expand{
	padding:-3px;
	color: #B00202;
	}

/* --- Links  --- */
a:link, a:visited {
  border:1px dotted #ccc;
  border-width:0;
  text-decoration:none;
  color: #B00202;
}
a:hover, a:active, a:focus {
  border-style:solid;
  background-color:#f0f0f0;
  text-decoration:underline;
  outline:0 none
}
a:active, a:focus {
  color:#D2D2D2;
}
.expand a {
  display:block;
  padding:3px 10px
}
.expand a:link, .expand a:visited {
  border-width:1px;
  background-image:url(../images/arrow-down.gif);
  background-repeat:no-repeat;
  background-position:98% 50%;
}
.expand a:hover, .expand a:active, .expand a:focus {
}
.expand a.open:link, .expand a.open:visited {
  border-style:solid;
  background:#eee url(../images/arrow-up.gif) no-repeat 98% 50%
}

JavaScript

///SELECTING CHECKBOXES////
$(function(){
 
    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });
 
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){
 
        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }
 
    });
});

$(function() {
    $("#content h3.expand").toggler();
    $("#content div.demo").expandAll({trigger: "h3.expand", ref: "h3.expand"});
    $("#content div.other").expandAll({
      expTxt : "[Show]", 
      cllpsTxt : "[Hide]",
      ref : "ul.collapse",
      showMethod : "show",
      hideMethod : "hide"
    });
    $("#content div.post").expandAll({
      expTxt : "[Read this entry]", 
      cllpsTxt : "[Hide this entry]",
      ref : "div.collapse", 
      localLinks: "p.top a"    
    });    
});