JSFiddle - React, Tailwind, and code Playground
HTML
<div id="uspstrackingContent" class="sideBoxContent">
<form name="sidebox_tracking_form" action="" method="get" id="sidebox_tracking_form">Tracking Number
<input type="text" name="sidebox_tracking_field" id="sidebox_tracking_field">
<input type="image" src="includes/templates/template_default/buttons/english/submit.gif" alt="Submit" title=" Submit ">
</form>
<br>
<div id="sideboxTrackingInformation">
<div id="uspsSideboxTrackingClose"><a id="closeSideboxTracking" href="#">Close</a>
</div>
<div id="currentStatus">delivered</div>
<table class="zebra-table" summary="Table describes the label details returned from track query." id="tc-hits">
<thead>
<tr class="header">
<th scope="col" class="date-time" style="width:33%">
<div class="thpad">Date & Time</div>
</th>
<th scope="col" class="status" style="width:33%">
<div class="thpad">Status of Item</div>
</th>
<th scope="col" class="location" style="width:33%">
<div class="thpad">Location</div>
</th>
</tr>
</thead>
<tbody class="details">
<tr class="detail-wrapper latest-detail">
<td class="date-time">
<p>April 27, 2015 , 11:56 am</p>
</td>
<td class="status">
<!-- <div class="details-toggle-icon"> </div> -->
<p class="info-text first" style="color: #2F6FA9;">Delivered, In/At Mailbox</p>
<input type="hidden" id="LabelSummaryDetails9400110200883621063578" value="Your item was delivered in or...
CSS
#sideboxTrackingInformation {
position: absolute;
background: white;
border: 1px solid black;
}
#currentStatus {
margin: 25px;
font-size: 25px;
text-transform: uppercase;
}
#uspsSideboxTrackingClose {
float: right;
font-size: 20px;
margin-right: 10px;
margin-top: 10px;
color: blue;
}
JavaScript
$(document).ready(function () {
$("#uspsSideboxTrackingClose").click(function () {
event.preventDefault();
console.log(event);
$('#sideboxTrackingInformation').hide();
});
});