Display table properly using tabsAdd table row in jQueryVertical alignment of elements overlapping in IEOpen a URL in a new tab (and not a new window) using JavaScriptGridView Lines Not Showing up in IEOpen link in new tab or windowChanging Menu Bar Font SizeCannot display HTML stringCSS position:fixed is working for the header but not for the footerTextarea too large for page?Invalid css style during zooming in calendar
Why do my fried eggs start browning very fast?
Have you been refused entry into the Federal Republic of Germany?
Why did the United States not resort to nuclear weapons in Vietnam?
Can birds evolve without trees?
Search and replace a substring only if another substring is not present
Are the "muddled thoughts" from Synaptic Static a magical effect?
In MTG, was there ever a five-color deck that worked well?
Went to a big 4 but got fired for underperformance in a year recently - Now every one thinks I'm pro - How to balance expectations?
Can an unintentional murderer leave Ir Miklat for Shalosh Regalim?
What does "autolyco-sentimental" mean?
Is law enforcement responsible for damages made by a search warrant?
Password management for kids - what's a good way to start?
What license to choose for my PhD thesis?
How to handle many times series?
Is the EU really banning "toxic propellants" in 2020? How is that going to work?
Proof of First Difference Property for Fourier Series
Partial Fractions: Why does this shortcut method work?
Subtle ways to render a planet uninhabitable
Why adjustbox needs a tweak of raise=-0.3ex with enumitem?
How does Rust's 128-bit integer `i128` work on a 64-bit system?
Why is the Vasa Museum in Stockholm so Popular?
Is an "are" omitted in this sentence
Why isn't the new LEGO CV joint available on Bricklink or Brickowl?
Export economy of Mars
Display table properly using tabs
Add table row in jQueryVertical alignment of elements overlapping in IEOpen a URL in a new tab (and not a new window) using JavaScriptGridView Lines Not Showing up in IEOpen link in new tab or windowChanging Menu Bar Font SizeCannot display HTML stringCSS position:fixed is working for the header but not for the footerTextarea too large for page?Invalid css style during zooming in calendar
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
2
I have an order tracking system with collapsible containers which contains tabs with a different table. However, whenever the user clicks the second order number and chooses a tab, the table will not show where it supposed to be but shows on the first order number table. For example, I chose order number 67890 and tabbed it to logistics, it should show the logistics table on the 67890 rows but it remained static and showed the table on the first row which is order number 12345.
How can I show the table with correspond to the chosen order number and tab? Please help
jQuery(document).ready(function()
jQuery('.closedArrow').click(function()
$(this).parents('tr').children('.expanded').toggle();
$(this).parents('tr').children('.collapsed').toggle();
$(this).toggleClass( "openArrow" );
);
);
</script>
<script type="text/javascript">
function addRow()
var table = document.getElementById("Section3_table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="issue[]" required/>';
row.insertCell(1).innerHTML = '<input type="text" name="details[]" size="20" required/>';
row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("Section3_table");
table.deleteRow(index);
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->
padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor:pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
padding-left: 20px;
cursor:pointer;
.steps
margin:0 0 20px;
padding:0;
list-style:none;
overflow:hidden;
.green
background:#7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display:none
.wrap .num.last:before
display:none
.black
background:#000 !important;
color:#fff!important;
.open .black:after
border-left-color: #000 !important;
color:#fff!important;
.steps li
float:left;
position:relative;
.wrap
float:left;
.num
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
background:#7dba00;
color:#000;
font-weight:bold;
text-align:center;
float:left;
position:relative;
margin:0 4px 0 0;
.num b, .steps p span
position:relative;
z-index:2;
display:block;
.num:after
content:" ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position:absolute;
right:-4px;
top:1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color:#000
.closed .num
color:#fff;
background:#000
.closed .num.last:after
display:none
.open .num:after
border-left-color:#ccc;
border-top-color:transparent;
border-bottom-color:transparent;
z-index:1;
.open .num:before
width: 0;
height: 0;
content:" ";
position:absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:-5px;
top:0;
z-index:0;
.open .num
background:#ccc;
.open .wrap
border-radius:15px 0 0 15px;
border:1px solid #7dba00;
li.open:after
content:" ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:0;
top:0;
z-index:0;
li.open:before
width: 0;
height: 0;
content:" ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position:absolute;
right:1px;
top:1px;
z-index:1;
.expanded
display:none;
<!--bbackground-color: red;-->
padding-right: 900px;
.tab
<!--background-color: yellow; -->
<!--border: 2px solid black; -->
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color:NONE;
color:#95db89;
border:2px solid #95db89;
.todo span
background-color:none;
color:#E1E6EB;
border:2px solid #E1E6EB;
.list span
color:#58D68D;
font-weight:500;
font-size: 12px;
.breadcrumb-pagination div p
text-align:center;
line-height:0;
margin:30px auto 25px;
.active p
border-bottom:2px solid #00abc9;
padding-bottom:27px;
margin-bottom:0px !important;
color: #3c4043;
font-weight:700;
.completed p
color:#bsb7c1;
.list p
color:#3c4043;
font-weight:700;
.completed span::before
content: '2713'
.title
text-align:center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px ;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
a:hover,a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Bag</td><td>1pc; Green</td></tr>
<tr><td>Pouch</td><td>1pc; Blue</td></tr>
<tr><td>Necklace</td><td>1pc; Heart shape; Gold</td></tr>
<tr><td>Shoes</td><td>1 pair; Red; Size 6</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>John Smith</td></tr>
<tr><td>SHIPPING ADDRESS</td><td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Dress</td><td>1pc; Yellow</td></tr>
<tr><td>Hat</td><td>1pc; Green</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>Jane Doe</td></tr>
<tr><td>SHIPPING ADDRESS</td><td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>1-541-754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>javascript jquery html css tabs
edited Mar 29 at 8:52
Zakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
asked Mar 27 at 1:21
Blue MinnieBlue Minnie
1119 bronze badges
add a comment |
2
I have an order tracking system with collapsible containers which contains tabs with a different table. However, whenever the user clicks the second order number and chooses a tab, the table will not show where it supposed to be but shows on the first order number table. For example, I chose order number 67890 and tabbed it to logistics, it should show the logistics table on the 67890 rows but it remained static and showed the table on the first row which is order number 12345.
How can I show the table with correspond to the chosen order number and tab? Please help
jQuery(document).ready(function()
jQuery('.closedArrow').click(function()
$(this).parents('tr').children('.expanded').toggle();
$(this).parents('tr').children('.collapsed').toggle();
$(this).toggleClass( "openArrow" );
);
);
</script>
<script type="text/javascript">
function addRow()
var table = document.getElementById("Section3_table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="issue[]" required/>';
row.insertCell(1).innerHTML = '<input type="text" name="details[]" size="20" required/>';
row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("Section3_table");
table.deleteRow(index);
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->
padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor:pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
padding-left: 20px;
cursor:pointer;
.steps
margin:0 0 20px;
padding:0;
list-style:none;
overflow:hidden;
.green
background:#7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display:none
.wrap .num.last:before
display:none
.black
background:#000 !important;
color:#fff!important;
.open .black:after
border-left-color: #000 !important;
color:#fff!important;
.steps li
float:left;
position:relative;
.wrap
float:left;
.num
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
background:#7dba00;
color:#000;
font-weight:bold;
text-align:center;
float:left;
position:relative;
margin:0 4px 0 0;
.num b, .steps p span
position:relative;
z-index:2;
display:block;
.num:after
content:" ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position:absolute;
right:-4px;
top:1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color:#000
.closed .num
color:#fff;
background:#000
.closed .num.last:after
display:none
.open .num:after
border-left-color:#ccc;
border-top-color:transparent;
border-bottom-color:transparent;
z-index:1;
.open .num:before
width: 0;
height: 0;
content:" ";
position:absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:-5px;
top:0;
z-index:0;
.open .num
background:#ccc;
.open .wrap
border-radius:15px 0 0 15px;
border:1px solid #7dba00;
li.open:after
content:" ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:0;
top:0;
z-index:0;
li.open:before
width: 0;
height: 0;
content:" ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position:absolute;
right:1px;
top:1px;
z-index:1;
.expanded
display:none;
<!--bbackground-color: red;-->
padding-right: 900px;
.tab
<!--background-color: yellow; -->
<!--border: 2px solid black; -->
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color:NONE;
color:#95db89;
border:2px solid #95db89;
.todo span
background-color:none;
color:#E1E6EB;
border:2px solid #E1E6EB;
.list span
color:#58D68D;
font-weight:500;
font-size: 12px;
.breadcrumb-pagination div p
text-align:center;
line-height:0;
margin:30px auto 25px;
.active p
border-bottom:2px solid #00abc9;
padding-bottom:27px;
margin-bottom:0px !important;
color: #3c4043;
font-weight:700;
.completed p
color:#bsb7c1;
.list p
color:#3c4043;
font-weight:700;
.completed span::before
content: '2713'
.title
text-align:center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px ;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
a:hover,a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Bag</td><td>1pc; Green</td></tr>
<tr><td>Pouch</td><td>1pc; Blue</td></tr>
<tr><td>Necklace</td><td>1pc; Heart shape; Gold</td></tr>
<tr><td>Shoes</td><td>1 pair; Red; Size 6</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>John Smith</td></tr>
<tr><td>SHIPPING ADDRESS</td><td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Dress</td><td>1pc; Yellow</td></tr>
<tr><td>Hat</td><td>1pc; Green</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>Jane Doe</td></tr>
<tr><td>SHIPPING ADDRESS</td><td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>1-541-754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>javascript jquery html css tabs
edited Mar 29 at 8:52
Zakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
asked Mar 27 at 1:21
Blue MinnieBlue Minnie
1119 bronze badges
add a comment |
2
2
2
I have an order tracking system with collapsible containers which contains tabs with a different table. However, whenever the user clicks the second order number and chooses a tab, the table will not show where it supposed to be but shows on the first order number table. For example, I chose order number 67890 and tabbed it to logistics, it should show the logistics table on the 67890 rows but it remained static and showed the table on the first row which is order number 12345.
How can I show the table with correspond to the chosen order number and tab? Please help
jQuery(document).ready(function()
jQuery('.closedArrow').click(function()
$(this).parents('tr').children('.expanded').toggle();
$(this).parents('tr').children('.collapsed').toggle();
$(this).toggleClass( "openArrow" );
);
);
</script>
<script type="text/javascript">
function addRow()
var table = document.getElementById("Section3_table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="issue[]" required/>';
row.insertCell(1).innerHTML = '<input type="text" name="details[]" size="20" required/>';
row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("Section3_table");
table.deleteRow(index);
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->
padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor:pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
padding-left: 20px;
cursor:pointer;
.steps
margin:0 0 20px;
padding:0;
list-style:none;
overflow:hidden;
.green
background:#7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display:none
.wrap .num.last:before
display:none
.black
background:#000 !important;
color:#fff!important;
.open .black:after
border-left-color: #000 !important;
color:#fff!important;
.steps li
float:left;
position:relative;
.wrap
float:left;
.num
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
background:#7dba00;
color:#000;
font-weight:bold;
text-align:center;
float:left;
position:relative;
margin:0 4px 0 0;
.num b, .steps p span
position:relative;
z-index:2;
display:block;
.num:after
content:" ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position:absolute;
right:-4px;
top:1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color:#000
.closed .num
color:#fff;
background:#000
.closed .num.last:after
display:none
.open .num:after
border-left-color:#ccc;
border-top-color:transparent;
border-bottom-color:transparent;
z-index:1;
.open .num:before
width: 0;
height: 0;
content:" ";
position:absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:-5px;
top:0;
z-index:0;
.open .num
background:#ccc;
.open .wrap
border-radius:15px 0 0 15px;
border:1px solid #7dba00;
li.open:after
content:" ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:0;
top:0;
z-index:0;
li.open:before
width: 0;
height: 0;
content:" ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position:absolute;
right:1px;
top:1px;
z-index:1;
.expanded
display:none;
<!--bbackground-color: red;-->
padding-right: 900px;
.tab
<!--background-color: yellow; -->
<!--border: 2px solid black; -->
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color:NONE;
color:#95db89;
border:2px solid #95db89;
.todo span
background-color:none;
color:#E1E6EB;
border:2px solid #E1E6EB;
.list span
color:#58D68D;
font-weight:500;
font-size: 12px;
.breadcrumb-pagination div p
text-align:center;
line-height:0;
margin:30px auto 25px;
.active p
border-bottom:2px solid #00abc9;
padding-bottom:27px;
margin-bottom:0px !important;
color: #3c4043;
font-weight:700;
.completed p
color:#bsb7c1;
.list p
color:#3c4043;
font-weight:700;
.completed span::before
content: '2713'
.title
text-align:center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px ;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
a:hover,a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Bag</td><td>1pc; Green</td></tr>
<tr><td>Pouch</td><td>1pc; Blue</td></tr>
<tr><td>Necklace</td><td>1pc; Heart shape; Gold</td></tr>
<tr><td>Shoes</td><td>1 pair; Red; Size 6</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>John Smith</td></tr>
<tr><td>SHIPPING ADDRESS</td><td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Dress</td><td>1pc; Yellow</td></tr>
<tr><td>Hat</td><td>1pc; Green</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>Jane Doe</td></tr>
<tr><td>SHIPPING ADDRESS</td><td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>1-541-754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>javascript jquery html css tabs
edited Mar 29 at 8:52
Zakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
asked Mar 27 at 1:21
Blue MinnieBlue Minnie
1119 bronze badges
I have an order tracking system with collapsible containers which contains tabs with a different table. However, whenever the user clicks the second order number and chooses a tab, the table will not show where it supposed to be but shows on the first order number table. For example, I chose order number 67890 and tabbed it to logistics, it should show the logistics table on the 67890 rows but it remained static and showed the table on the first row which is order number 12345.
How can I show the table with correspond to the chosen order number and tab? Please help
jQuery(document).ready(function()
jQuery('.closedArrow').click(function()
$(this).parents('tr').children('.expanded').toggle();
$(this).parents('tr').children('.collapsed').toggle();
$(this).toggleClass( "openArrow" );
);
);
</script>
<script type="text/javascript">
function addRow()
var table = document.getElementById("Section3_table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="issue[]" required/>';
row.insertCell(1).innerHTML = '<input type="text" name="details[]" size="20" required/>';
row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("Section3_table");
table.deleteRow(index);
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->
padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor:pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
padding-left: 20px;
cursor:pointer;
.steps
margin:0 0 20px;
padding:0;
list-style:none;
overflow:hidden;
.green
background:#7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display:none
.wrap .num.last:before
display:none
.black
background:#000 !important;
color:#fff!important;
.open .black:after
border-left-color: #000 !important;
color:#fff!important;
.steps li
float:left;
position:relative;
.wrap
float:left;
.num
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
background:#7dba00;
color:#000;
font-weight:bold;
text-align:center;
float:left;
position:relative;
margin:0 4px 0 0;
.num b, .steps p span
position:relative;
z-index:2;
display:block;
.num:after
content:" ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position:absolute;
right:-4px;
top:1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color:#000
.closed .num
color:#fff;
background:#000
.closed .num.last:after
display:none
.open .num:after
border-left-color:#ccc;
border-top-color:transparent;
border-bottom-color:transparent;
z-index:1;
.open .num:before
width: 0;
height: 0;
content:" ";
position:absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:-5px;
top:0;
z-index:0;
.open .num
background:#ccc;
.open .wrap
border-radius:15px 0 0 15px;
border:1px solid #7dba00;
li.open:after
content:" ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:0;
top:0;
z-index:0;
li.open:before
width: 0;
height: 0;
content:" ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position:absolute;
right:1px;
top:1px;
z-index:1;
.expanded
display:none;
<!--bbackground-color: red;-->
padding-right: 900px;
.tab
<!--background-color: yellow; -->
<!--border: 2px solid black; -->
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color:NONE;
color:#95db89;
border:2px solid #95db89;
.todo span
background-color:none;
color:#E1E6EB;
border:2px solid #E1E6EB;
.list span
color:#58D68D;
font-weight:500;
font-size: 12px;
.breadcrumb-pagination div p
text-align:center;
line-height:0;
margin:30px auto 25px;
.active p
border-bottom:2px solid #00abc9;
padding-bottom:27px;
margin-bottom:0px !important;
color: #3c4043;
font-weight:700;
.completed p
color:#bsb7c1;
.list p
color:#3c4043;
font-weight:700;
.completed span::before
content: '2713'
.title
text-align:center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px ;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
a:hover,a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Bag</td><td>1pc; Green</td></tr>
<tr><td>Pouch</td><td>1pc; Blue</td></tr>
<tr><td>Necklace</td><td>1pc; Heart shape; Gold</td></tr>
<tr><td>Shoes</td><td>1 pair; Red; Size 6</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>John Smith</td></tr>
<tr><td>SHIPPING ADDRESS</td><td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Dress</td><td>1pc; Yellow</td></tr>
<tr><td>Hat</td><td>1pc; Green</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>Jane Doe</td></tr>
<tr><td>SHIPPING ADDRESS</td><td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>1-541-754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>jQuery(document).ready(function()
jQuery('.closedArrow').click(function()
$(this).parents('tr').children('.expanded').toggle();
$(this).parents('tr').children('.collapsed').toggle();
$(this).toggleClass( "openArrow" );
);
);
</script>
<script type="text/javascript">
function addRow()
var table = document.getElementById("Section3_table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="issue[]" required/>';
row.insertCell(1).innerHTML = '<input type="text" name="details[]" size="20" required/>';
row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("Section3_table");
table.deleteRow(index);
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->
padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor:pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
padding-left: 20px;
cursor:pointer;
.steps
margin:0 0 20px;
padding:0;
list-style:none;
overflow:hidden;
.green
background:#7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display:none
.wrap .num.last:before
display:none
.black
background:#000 !important;
color:#fff!important;
.open .black:after
border-left-color: #000 !important;
color:#fff!important;
.steps li
float:left;
position:relative;
.wrap
float:left;
.num
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
background:#7dba00;
color:#000;
font-weight:bold;
text-align:center;
float:left;
position:relative;
margin:0 4px 0 0;
.num b, .steps p span
position:relative;
z-index:2;
display:block;
.num:after
content:" ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position:absolute;
right:-4px;
top:1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color:#000
.closed .num
color:#fff;
background:#000
.closed .num.last:after
display:none
.open .num:after
border-left-color:#ccc;
border-top-color:transparent;
border-bottom-color:transparent;
z-index:1;
.open .num:before
width: 0;
height: 0;
content:" ";
position:absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:-5px;
top:0;
z-index:0;
.open .num
background:#ccc;
.open .wrap
border-radius:15px 0 0 15px;
border:1px solid #7dba00;
li.open:after
content:" ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:0;
top:0;
z-index:0;
li.open:before
width: 0;
height: 0;
content:" ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position:absolute;
right:1px;
top:1px;
z-index:1;
.expanded
display:none;
<!--bbackground-color: red;-->
padding-right: 900px;
.tab
<!--background-color: yellow; -->
<!--border: 2px solid black; -->
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color:NONE;
color:#95db89;
border:2px solid #95db89;
.todo span
background-color:none;
color:#E1E6EB;
border:2px solid #E1E6EB;
.list span
color:#58D68D;
font-weight:500;
font-size: 12px;
.breadcrumb-pagination div p
text-align:center;
line-height:0;
margin:30px auto 25px;
.active p
border-bottom:2px solid #00abc9;
padding-bottom:27px;
margin-bottom:0px !important;
color: #3c4043;
font-weight:700;
.completed p
color:#bsb7c1;
.list p
color:#3c4043;
font-weight:700;
.completed span::before
content: '2713'
.title
text-align:center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px ;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
a:hover,a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Bag</td><td>1pc; Green</td></tr>
<tr><td>Pouch</td><td>1pc; Blue</td></tr>
<tr><td>Necklace</td><td>1pc; Heart shape; Gold</td></tr>
<tr><td>Shoes</td><td>1 pair; Red; Size 6</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>John Smith</td></tr>
<tr><td>SHIPPING ADDRESS</td><td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Dress</td><td>1pc; Yellow</td></tr>
<tr><td>Hat</td><td>1pc; Green</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>Jane Doe</td></tr>
<tr><td>SHIPPING ADDRESS</td><td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>1-541-754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>jQuery(document).ready(function()
jQuery('.closedArrow').click(function()
$(this).parents('tr').children('.expanded').toggle();
$(this).parents('tr').children('.collapsed').toggle();
$(this).toggleClass( "openArrow" );
);
);
</script>
<script type="text/javascript">
function addRow()
var table = document.getElementById("Section3_table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="issue[]" required/>';
row.insertCell(1).innerHTML = '<input type="text" name="details[]" size="20" required/>';
row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("Section3_table");
table.deleteRow(index);
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->
padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor:pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
padding-left: 20px;
cursor:pointer;
.steps
margin:0 0 20px;
padding:0;
list-style:none;
overflow:hidden;
.green
background:#7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display:none
.wrap .num.last:before
display:none
.black
background:#000 !important;
color:#fff!important;
.open .black:after
border-left-color: #000 !important;
color:#fff!important;
.steps li
float:left;
position:relative;
.wrap
float:left;
.num
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
background:#7dba00;
color:#000;
font-weight:bold;
text-align:center;
float:left;
position:relative;
margin:0 4px 0 0;
.num b, .steps p span
position:relative;
z-index:2;
display:block;
.num:after
content:" ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position:absolute;
right:-4px;
top:1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color:#000
.closed .num
color:#fff;
background:#000
.closed .num.last:after
display:none
.open .num:after
border-left-color:#ccc;
border-top-color:transparent;
border-bottom-color:transparent;
z-index:1;
.open .num:before
width: 0;
height: 0;
content:" ";
position:absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:-5px;
top:0;
z-index:0;
.open .num
background:#ccc;
.open .wrap
border-radius:15px 0 0 15px;
border:1px solid #7dba00;
li.open:after
content:" ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position:absolute;
right:0;
top:0;
z-index:0;
li.open:before
width: 0;
height: 0;
content:" ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position:absolute;
right:1px;
top:1px;
z-index:1;
.expanded
display:none;
<!--bbackground-color: red;-->
padding-right: 900px;
.tab
<!--background-color: yellow; -->
<!--border: 2px solid black; -->
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color:NONE;
color:#95db89;
border:2px solid #95db89;
.todo span
background-color:none;
color:#E1E6EB;
border:2px solid #E1E6EB;
.list span
color:#58D68D;
font-weight:500;
font-size: 12px;
.breadcrumb-pagination div p
text-align:center;
line-height:0;
margin:30px auto 25px;
.active p
border-bottom:2px solid #00abc9;
padding-bottom:27px;
margin-bottom:0px !important;
color: #3c4043;
font-weight:700;
.completed p
color:#bsb7c1;
.list p
color:#3c4043;
font-weight:700;
.completed span::before
content: '2713'
.title
text-align:center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px ;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
a:hover,a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Bag</td><td>1pc; Green</td></tr>
<tr><td>Pouch</td><td>1pc; Blue</td></tr>
<tr><td>Necklace</td><td>1pc; Heart shape; Gold</td></tr>
<tr><td>Shoes</td><td>1 pair; Red; Size 6</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>John Smith</td></tr>
<tr><td>SHIPPING ADDRESS</td><td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed"><ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol></td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol><hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr><th>ITEM</th><th>DETAILS</th></tr>
<tr><td>Dress</td><td>1pc; Yellow</td></tr>
<tr><td>Hat</td><td>1pc; Green</td></tr>
</table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
<tr><td>NAME</td><td>Jane Doe</td></tr>
<tr><td>SHIPPING ADDRESS</td><td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td></tr>
<tr><td>TELEPHONE NUMBER</td><td>1-541-754-3010</td></tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr><th>ISSUE</th><th>DETAILS</th></tr>
<tr><td></td><td></td></tr>
</center></table><br><hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
<tr><td></td><td></td><td></td></tr>
</table><br><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>javascript jquery html css tabs
javascript jquery html css tabs
edited Mar 29 at 8:52
Zakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
asked Mar 27 at 1:21
Blue MinnieBlue Minnie
1119 bronze badges
edited Mar 29 at 8:52
Zakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
asked Mar 27 at 1:21
Blue MinnieBlue Minnie
1119 bronze badges
edited Mar 29 at 8:52
Zakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
edited Mar 29 at 8:52
Zakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
edited Mar 29 at 8:52
Zakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
58.4k13 gold badges45 silver badges74 bronze badges
asked Mar 27 at 1:21
Blue MinnieBlue Minnie
1119 bronze badges
asked Mar 27 at 1:21
Blue MinnieBlue Minnie
1119 bronze badges
asked Mar 27 at 1:21
Blue MinnieBlue Minnie
1119 bronze badges
1119 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
The main problem comes from the duplicate id's, #Section1,#Section2,#Section3,#Section4 I have changed them in the second row to #Section5,#Section6,#Section7,#Section8 and you could see that it works.
NOTE: The id must be unique in the same document.
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
-->padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor: pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
-->padding-left: 20px;
cursor: pointer;
.steps
margin: 0 0 20px;
padding: 0;
list-style: none;
overflow: hidden;
.green
background: #7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display: none
.wrap .num.last:before
display: none
.black
background: #000 !important;
color: #fff!important;
.open .black:after
border-left-color: #000 !important;
color: #fff!important;
.steps li
float: left;
position: relative;
.wrap
float: left;
.num
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #7dba00;
color: #000;
font-weight: bold;
text-align: center;
float: left;
position: relative;
margin: 0 4px 0 0;
.num b,
.steps p span
position: relative;
z-index: 2;
display: block;
.num:after
content: " ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position: absolute;
right: -4px;
top: 1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color: #000
.closed .num
color: #fff;
background: #000
.closed .num.last:after
display: none
.open .num:after
border-left-color: #ccc;
border-top-color: transparent;
border-bottom-color: transparent;
z-index: 1;
.open .num:before
width: 0;
height: 0;
content: " ";
position: absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: -5px;
top: 0;
z-index: 0;
.open .num
background: #ccc;
.open .wrap
border-radius: 15px 0 0 15px;
border: 1px solid #7dba00;
li.open:after
content: " ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: 0;
top: 0;
z-index: 0;
li.open:before
width: 0;
height: 0;
content: " ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
.expanded
display: none;
<!--bbackground-color: red;
-->padding-right: 900px;
.tab
<!--background-color: yellow;
--><!--border: 2px solid black;
-->border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color: NONE;
color: #95db89;
border: 2px solid #95db89;
.todo span
background-color: none;
color: #E1E6EB;
border: 2px solid #E1E6EB;
.list span
color: #58D68D;
font-weight: 500;
font-size: 12px;
.breadcrumb-pagination div p
text-align: center;
line-height: 0;
margin: 30px auto 25px;
.active p
border-bottom: 2px solid #00abc9;
padding-bottom: 27px;
margin-bottom: 0px !important;
color: #3c4043;
font-weight: 700;
.completed p
color: #bsb7c1;
.list p
color: #3c4043;
font-weight: 700;
.completed span::before
content: '2713'
.title
text-align: center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
a:hover,
a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Bag</td>
<td>1pc; Green</td>
</tr>
<tr>
<td>Pouch</td>
<td>1pc; Blue</td>
</tr>
<tr>
<td>Necklace</td>
<td>1pc; Heart shape; Gold</td>
</tr>
<tr>
<td>Shoes</td>
<td>1 pair; Red; Size 6</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>John Smith</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section5">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Dress</td>
<td>1pc; Yellow</td>
</tr>
<tr>
<td>Hat</td>
<td>1pc; Green</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section6">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>Jane Doe</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>1-541-754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section7">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section8">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>answered Mar 29 at 9:00
Zakaria AcharkiZakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
Congratulations, you've earned the VoteUp privilege consider to use it if any answer helps you if any answer is what you're looking for Mark it as the correct answer For the future readers.
– Zakaria Acharki
Mar 29 at 9:04
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368435%2fdisplay-table-properly-using-tabs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The main problem comes from the duplicate id's, #Section1,#Section2,#Section3,#Section4 I have changed them in the second row to #Section5,#Section6,#Section7,#Section8 and you could see that it works.
NOTE: The id must be unique in the same document.
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
-->padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor: pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
-->padding-left: 20px;
cursor: pointer;
.steps
margin: 0 0 20px;
padding: 0;
list-style: none;
overflow: hidden;
.green
background: #7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display: none
.wrap .num.last:before
display: none
.black
background: #000 !important;
color: #fff!important;
.open .black:after
border-left-color: #000 !important;
color: #fff!important;
.steps li
float: left;
position: relative;
.wrap
float: left;
.num
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #7dba00;
color: #000;
font-weight: bold;
text-align: center;
float: left;
position: relative;
margin: 0 4px 0 0;
.num b,
.steps p span
position: relative;
z-index: 2;
display: block;
.num:after
content: " ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position: absolute;
right: -4px;
top: 1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color: #000
.closed .num
color: #fff;
background: #000
.closed .num.last:after
display: none
.open .num:after
border-left-color: #ccc;
border-top-color: transparent;
border-bottom-color: transparent;
z-index: 1;
.open .num:before
width: 0;
height: 0;
content: " ";
position: absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: -5px;
top: 0;
z-index: 0;
.open .num
background: #ccc;
.open .wrap
border-radius: 15px 0 0 15px;
border: 1px solid #7dba00;
li.open:after
content: " ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: 0;
top: 0;
z-index: 0;
li.open:before
width: 0;
height: 0;
content: " ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
.expanded
display: none;
<!--bbackground-color: red;
-->padding-right: 900px;
.tab
<!--background-color: yellow;
--><!--border: 2px solid black;
-->border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color: NONE;
color: #95db89;
border: 2px solid #95db89;
.todo span
background-color: none;
color: #E1E6EB;
border: 2px solid #E1E6EB;
.list span
color: #58D68D;
font-weight: 500;
font-size: 12px;
.breadcrumb-pagination div p
text-align: center;
line-height: 0;
margin: 30px auto 25px;
.active p
border-bottom: 2px solid #00abc9;
padding-bottom: 27px;
margin-bottom: 0px !important;
color: #3c4043;
font-weight: 700;
.completed p
color: #bsb7c1;
.list p
color: #3c4043;
font-weight: 700;
.completed span::before
content: '2713'
.title
text-align: center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
a:hover,
a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Bag</td>
<td>1pc; Green</td>
</tr>
<tr>
<td>Pouch</td>
<td>1pc; Blue</td>
</tr>
<tr>
<td>Necklace</td>
<td>1pc; Heart shape; Gold</td>
</tr>
<tr>
<td>Shoes</td>
<td>1 pair; Red; Size 6</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>John Smith</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section5">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Dress</td>
<td>1pc; Yellow</td>
</tr>
<tr>
<td>Hat</td>
<td>1pc; Green</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section6">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>Jane Doe</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>1-541-754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section7">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section8">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>answered Mar 29 at 9:00
Zakaria AcharkiZakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
Congratulations, you've earned the VoteUp privilege consider to use it if any answer helps you if any answer is what you're looking for Mark it as the correct answer For the future readers.
– Zakaria Acharki
Mar 29 at 9:04
add a comment |
0
The main problem comes from the duplicate id's, #Section1,#Section2,#Section3,#Section4 I have changed them in the second row to #Section5,#Section6,#Section7,#Section8 and you could see that it works.
NOTE: The id must be unique in the same document.
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
-->padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor: pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
-->padding-left: 20px;
cursor: pointer;
.steps
margin: 0 0 20px;
padding: 0;
list-style: none;
overflow: hidden;
.green
background: #7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display: none
.wrap .num.last:before
display: none
.black
background: #000 !important;
color: #fff!important;
.open .black:after
border-left-color: #000 !important;
color: #fff!important;
.steps li
float: left;
position: relative;
.wrap
float: left;
.num
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #7dba00;
color: #000;
font-weight: bold;
text-align: center;
float: left;
position: relative;
margin: 0 4px 0 0;
.num b,
.steps p span
position: relative;
z-index: 2;
display: block;
.num:after
content: " ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position: absolute;
right: -4px;
top: 1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color: #000
.closed .num
color: #fff;
background: #000
.closed .num.last:after
display: none
.open .num:after
border-left-color: #ccc;
border-top-color: transparent;
border-bottom-color: transparent;
z-index: 1;
.open .num:before
width: 0;
height: 0;
content: " ";
position: absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: -5px;
top: 0;
z-index: 0;
.open .num
background: #ccc;
.open .wrap
border-radius: 15px 0 0 15px;
border: 1px solid #7dba00;
li.open:after
content: " ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: 0;
top: 0;
z-index: 0;
li.open:before
width: 0;
height: 0;
content: " ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
.expanded
display: none;
<!--bbackground-color: red;
-->padding-right: 900px;
.tab
<!--background-color: yellow;
--><!--border: 2px solid black;
-->border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color: NONE;
color: #95db89;
border: 2px solid #95db89;
.todo span
background-color: none;
color: #E1E6EB;
border: 2px solid #E1E6EB;
.list span
color: #58D68D;
font-weight: 500;
font-size: 12px;
.breadcrumb-pagination div p
text-align: center;
line-height: 0;
margin: 30px auto 25px;
.active p
border-bottom: 2px solid #00abc9;
padding-bottom: 27px;
margin-bottom: 0px !important;
color: #3c4043;
font-weight: 700;
.completed p
color: #bsb7c1;
.list p
color: #3c4043;
font-weight: 700;
.completed span::before
content: '2713'
.title
text-align: center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
a:hover,
a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Bag</td>
<td>1pc; Green</td>
</tr>
<tr>
<td>Pouch</td>
<td>1pc; Blue</td>
</tr>
<tr>
<td>Necklace</td>
<td>1pc; Heart shape; Gold</td>
</tr>
<tr>
<td>Shoes</td>
<td>1 pair; Red; Size 6</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>John Smith</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section5">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Dress</td>
<td>1pc; Yellow</td>
</tr>
<tr>
<td>Hat</td>
<td>1pc; Green</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section6">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>Jane Doe</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>1-541-754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section7">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section8">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>answered Mar 29 at 9:00
Zakaria AcharkiZakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
Congratulations, you've earned the VoteUp privilege consider to use it if any answer helps you if any answer is what you're looking for Mark it as the correct answer For the future readers.
– Zakaria Acharki
Mar 29 at 9:04
add a comment |
0
0
0
The main problem comes from the duplicate id's, #Section1,#Section2,#Section3,#Section4 I have changed them in the second row to #Section5,#Section6,#Section7,#Section8 and you could see that it works.
NOTE: The id must be unique in the same document.
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
-->padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor: pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
-->padding-left: 20px;
cursor: pointer;
.steps
margin: 0 0 20px;
padding: 0;
list-style: none;
overflow: hidden;
.green
background: #7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display: none
.wrap .num.last:before
display: none
.black
background: #000 !important;
color: #fff!important;
.open .black:after
border-left-color: #000 !important;
color: #fff!important;
.steps li
float: left;
position: relative;
.wrap
float: left;
.num
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #7dba00;
color: #000;
font-weight: bold;
text-align: center;
float: left;
position: relative;
margin: 0 4px 0 0;
.num b,
.steps p span
position: relative;
z-index: 2;
display: block;
.num:after
content: " ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position: absolute;
right: -4px;
top: 1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color: #000
.closed .num
color: #fff;
background: #000
.closed .num.last:after
display: none
.open .num:after
border-left-color: #ccc;
border-top-color: transparent;
border-bottom-color: transparent;
z-index: 1;
.open .num:before
width: 0;
height: 0;
content: " ";
position: absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: -5px;
top: 0;
z-index: 0;
.open .num
background: #ccc;
.open .wrap
border-radius: 15px 0 0 15px;
border: 1px solid #7dba00;
li.open:after
content: " ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: 0;
top: 0;
z-index: 0;
li.open:before
width: 0;
height: 0;
content: " ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
.expanded
display: none;
<!--bbackground-color: red;
-->padding-right: 900px;
.tab
<!--background-color: yellow;
--><!--border: 2px solid black;
-->border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color: NONE;
color: #95db89;
border: 2px solid #95db89;
.todo span
background-color: none;
color: #E1E6EB;
border: 2px solid #E1E6EB;
.list span
color: #58D68D;
font-weight: 500;
font-size: 12px;
.breadcrumb-pagination div p
text-align: center;
line-height: 0;
margin: 30px auto 25px;
.active p
border-bottom: 2px solid #00abc9;
padding-bottom: 27px;
margin-bottom: 0px !important;
color: #3c4043;
font-weight: 700;
.completed p
color: #bsb7c1;
.list p
color: #3c4043;
font-weight: 700;
.completed span::before
content: '2713'
.title
text-align: center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
a:hover,
a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Bag</td>
<td>1pc; Green</td>
</tr>
<tr>
<td>Pouch</td>
<td>1pc; Blue</td>
</tr>
<tr>
<td>Necklace</td>
<td>1pc; Heart shape; Gold</td>
</tr>
<tr>
<td>Shoes</td>
<td>1 pair; Red; Size 6</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>John Smith</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section5">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Dress</td>
<td>1pc; Yellow</td>
</tr>
<tr>
<td>Hat</td>
<td>1pc; Green</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section6">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>Jane Doe</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>1-541-754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section7">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section8">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>answered Mar 29 at 9:00
Zakaria AcharkiZakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
The main problem comes from the duplicate id's, #Section1,#Section2,#Section3,#Section4 I have changed them in the second row to #Section5,#Section6,#Section7,#Section8 and you could see that it works.
NOTE: The id must be unique in the same document.
.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
-->padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor: pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
-->padding-left: 20px;
cursor: pointer;
.steps
margin: 0 0 20px;
padding: 0;
list-style: none;
overflow: hidden;
.green
background: #7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display: none
.wrap .num.last:before
display: none
.black
background: #000 !important;
color: #fff!important;
.open .black:after
border-left-color: #000 !important;
color: #fff!important;
.steps li
float: left;
position: relative;
.wrap
float: left;
.num
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #7dba00;
color: #000;
font-weight: bold;
text-align: center;
float: left;
position: relative;
margin: 0 4px 0 0;
.num b,
.steps p span
position: relative;
z-index: 2;
display: block;
.num:after
content: " ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position: absolute;
right: -4px;
top: 1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color: #000
.closed .num
color: #fff;
background: #000
.closed .num.last:after
display: none
.open .num:after
border-left-color: #ccc;
border-top-color: transparent;
border-bottom-color: transparent;
z-index: 1;
.open .num:before
width: 0;
height: 0;
content: " ";
position: absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: -5px;
top: 0;
z-index: 0;
.open .num
background: #ccc;
.open .wrap
border-radius: 15px 0 0 15px;
border: 1px solid #7dba00;
li.open:after
content: " ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: 0;
top: 0;
z-index: 0;
li.open:before
width: 0;
height: 0;
content: " ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
.expanded
display: none;
<!--bbackground-color: red;
-->padding-right: 900px;
.tab
<!--background-color: yellow;
--><!--border: 2px solid black;
-->border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color: NONE;
color: #95db89;
border: 2px solid #95db89;
.todo span
background-color: none;
color: #E1E6EB;
border: 2px solid #E1E6EB;
.list span
color: #58D68D;
font-weight: 500;
font-size: 12px;
.breadcrumb-pagination div p
text-align: center;
line-height: 0;
margin: 30px auto 25px;
.active p
border-bottom: 2px solid #00abc9;
padding-bottom: 27px;
margin-bottom: 0px !important;
color: #3c4043;
font-weight: 700;
.completed p
color: #bsb7c1;
.list p
color: #3c4043;
font-weight: 700;
.completed span::before
content: '2713'
.title
text-align: center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
a:hover,
a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Bag</td>
<td>1pc; Green</td>
</tr>
<tr>
<td>Pouch</td>
<td>1pc; Blue</td>
</tr>
<tr>
<td>Necklace</td>
<td>1pc; Heart shape; Gold</td>
</tr>
<tr>
<td>Shoes</td>
<td>1 pair; Red; Size 6</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>John Smith</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section5">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Dress</td>
<td>1pc; Yellow</td>
</tr>
<tr>
<td>Hat</td>
<td>1pc; Green</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section6">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>Jane Doe</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>1-541-754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section7">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section8">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
-->padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor: pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
-->padding-left: 20px;
cursor: pointer;
.steps
margin: 0 0 20px;
padding: 0;
list-style: none;
overflow: hidden;
.green
background: #7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display: none
.wrap .num.last:before
display: none
.black
background: #000 !important;
color: #fff!important;
.open .black:after
border-left-color: #000 !important;
color: #fff!important;
.steps li
float: left;
position: relative;
.wrap
float: left;
.num
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #7dba00;
color: #000;
font-weight: bold;
text-align: center;
float: left;
position: relative;
margin: 0 4px 0 0;
.num b,
.steps p span
position: relative;
z-index: 2;
display: block;
.num:after
content: " ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position: absolute;
right: -4px;
top: 1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color: #000
.closed .num
color: #fff;
background: #000
.closed .num.last:after
display: none
.open .num:after
border-left-color: #ccc;
border-top-color: transparent;
border-bottom-color: transparent;
z-index: 1;
.open .num:before
width: 0;
height: 0;
content: " ";
position: absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: -5px;
top: 0;
z-index: 0;
.open .num
background: #ccc;
.open .wrap
border-radius: 15px 0 0 15px;
border: 1px solid #7dba00;
li.open:after
content: " ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: 0;
top: 0;
z-index: 0;
li.open:before
width: 0;
height: 0;
content: " ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
.expanded
display: none;
<!--bbackground-color: red;
-->padding-right: 900px;
.tab
<!--background-color: yellow;
--><!--border: 2px solid black;
-->border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color: NONE;
color: #95db89;
border: 2px solid #95db89;
.todo span
background-color: none;
color: #E1E6EB;
border: 2px solid #E1E6EB;
.list span
color: #58D68D;
font-weight: 500;
font-size: 12px;
.breadcrumb-pagination div p
text-align: center;
line-height: 0;
margin: 30px auto 25px;
.active p
border-bottom: 2px solid #00abc9;
padding-bottom: 27px;
margin-bottom: 0px !important;
color: #3c4043;
font-weight: 700;
.completed p
color: #bsb7c1;
.list p
color: #3c4043;
font-weight: 700;
.completed span::before
content: '2713'
.title
text-align: center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
a:hover,
a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Bag</td>
<td>1pc; Green</td>
</tr>
<tr>
<td>Pouch</td>
<td>1pc; Blue</td>
</tr>
<tr>
<td>Necklace</td>
<td>1pc; Heart shape; Gold</td>
</tr>
<tr>
<td>Shoes</td>
<td>1 pair; Red; Size 6</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>John Smith</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section5">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Dress</td>
<td>1pc; Yellow</td>
</tr>
<tr>
<td>Hat</td>
<td>1pc; Green</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section6">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>Jane Doe</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>1-541-754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section7">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section8">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>.closedArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
-->padding-left: 20px;
padding-bottom: 10px;
padding-top: 4px;
cursor: pointer;
.openArrow
<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
-->padding-left: 20px;
cursor: pointer;
.steps
margin: 0 0 20px;
padding: 0;
list-style: none;
overflow: hidden;
.green
background: #7dba00 !important;
color: #666666 !important;
.grey
color: #666666 !important;
.open .green:after
border-left-color: #7dba00 !important;
.wrap .num.last:after
display: none
.wrap .num.last:before
display: none
.black
background: #000 !important;
color: #fff!important;
.open .black:after
border-left-color: #000 !important;
color: #fff!important;
.steps li
float: left;
position: relative;
.wrap
float: left;
.num
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #7dba00;
color: #000;
font-weight: bold;
text-align: center;
float: left;
position: relative;
margin: 0 4px 0 0;
.num b,
.steps p span
position: relative;
z-index: 2;
display: block;
.num:after
content: " ";
width: 0;
height: 0;
border-top: 14px solid #fff;
border-bottom: 14px solid #fff;
border-left: 14px solid #7dba00;
position: absolute;
right: -4px;
top: 1px;
.steps p
background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
.closed .num:after
border-left-color: #000
.closed .num
color: #fff;
background: #000
.closed .num.last:after
display: none
.open .num:after
border-left-color: #ccc;
border-top-color: transparent;
border-bottom-color: transparent;
z-index: 1;
.open .num:before
width: 0;
height: 0;
content: " ";
position: absolute;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: -5px;
top: 0;
z-index: 0;
.open .num
background: #ccc;
.open .wrap
border-radius: 15px 0 0 15px;
border: 1px solid #7dba00;
li.open:after
content: " ";
width: 0;
height: 0;
border-top: 16px solid #fff;
border-bottom: 16px solid #fff;
border-left: 15px solid #7dba00;
position: absolute;
right: 0;
top: 0;
z-index: 0;
li.open:before
width: 0;
height: 0;
content: " ";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 14px solid #fff;
position: absolute;
right: 1px;
top: 1px;
z-index: 1;
.expanded
display: none;
<!--bbackground-color: red;
-->padding-right: 900px;
.tab
<!--background-color: yellow;
--><!--border: 2px solid black;
-->border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 15px;
text-align: left;
width: 85%;
margin-left: 230px;
.column
float: left;
width: 25%;
.row:after
content: "";
display: table;
clear: both;
@media screen and (max-width: 600px)
.column
width: 100%;
.completed span
background-color: NONE;
color: #95db89;
border: 2px solid #95db89;
.todo span
background-color: none;
color: #E1E6EB;
border: 2px solid #E1E6EB;
.list span
color: #58D68D;
font-weight: 500;
font-size: 12px;
.breadcrumb-pagination div p
text-align: center;
line-height: 0;
margin: 30px auto 25px;
.active p
border-bottom: 2px solid #00abc9;
padding-bottom: 27px;
margin-bottom: 0px !important;
color: #3c4043;
font-weight: 700;
.completed p
color: #bsb7c1;
.list p
color: #3c4043;
font-weight: 700;
.completed span::before
content: '2713'
.title
text-align: center;
text-decoration: none;
margin-left: 365px;
color: #444;
table
border-collapse: collapse;
box-shadow: inset 0 1px 0 #fff;
font-size: 15px;
line-height: 15px;
text-align: left;
width: 98%;
th
background: linear-gradient(#000000, #4d4d4d);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
th:after
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
content: '';
display: block;
height: 15%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
th:first-child
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
th:last-child
box-shadow: inset -1px 1px 0 #999;
td
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 8px;
position: relative;
transition: all 300ms;
td:first-child
box-shadow: inset 1px 0 0 #fff;
td:last-child
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
tr
background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:nth-child(odd) td
background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
tr:last-of-type td
box-shadow: inset 0 -1px 0 #fff;
tr:last-of-type td:first-child
box-shadow: inset 1px -1px 0 #fff;
tr:last-of-type td:last-child
box-shadow: inset -1px -1px 0 #fff;
h1
color: #444;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
a:hover,
a:focus
outline: none;
text-decoration: none;
.tab
text-align: center;
.tab .nav-tabs
display: inline-block;
position: relative;
border-bottom: none;
.tab .nav-tabs li
margin: 0;
.tab .nav-tabs li a
display: block;
padding: 80px 25px 0 25px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #999;
text-transform: uppercase;
text-align: center;
border-radius: 0;
border: none;
border-bottom: 2px solid #fff;
margin-right: 0;
overflow: hidden;
z-index: 1;
position: relative;
transition: all 0.3s ease 0s;
.tab .nav-tabs li a span
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #f2f2f2;
margin: auto;
font-size: 22px;
color: #999;
border-radius: 5px;
position: absolute;
top: 10px;
left: 0;
right: 0;
transform: rotate(45deg);
.tab .nav-tabs li.active a span
background: #29335c;
color: #fff;
.tab .nav-tabs li a span i
transform: rotate(-45deg);
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover
color: black;
border: none;
border-bottom: 2px solid #fff;
.tab .nav-tabs li.active a
border-bottom: 2px solid #29335c;
.tab .tab-content
padding: 30px 0 0 19px;
margin-top: -5px;
font-size: 15px;
color: black;
line-height: 26px;
text-align: left;
border-top: 1px solid #e5e5e5;
width: 600px;
.tab .tab-content .tab-pane #Section3_table
margin-left: -8px;
.tab .tab-content h3
font-size: 24px;
margin-top: 0;
@media only screen and (max-width: 479px)
.tab .nav-tabs li
width: 100%;
text-align: center;
margin-bottom: 5px;
.tab .nav-tabs li:last-child
margin-bottom: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
<tr>
<th>ORDER NUMBER</th>
<th>CUSTOMER NAME</th>
<th>LOCATION</th>
</tr>
<form action="save.php" method="POST">
<td valign="top"><span class="closedArrow"> 12345 </span></td>
<td valign="top"><span class="closedArrow"> JOHN </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li>
<div class="num green"><b>1</b></div>
</li>
<li>
<div class="num green"><b>2</b></div>
</li>
<li>
<div class="num green"><b>3</b></div>
</li>
<li>
<div class="num green"><b>4</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>PACKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>3</b></div>
<p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>4</b></div>
<p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>5</b></div>
<p><span>SHIPPING</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE </span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE </span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Bag</td>
<td>1pc; Green</td>
</tr>
<tr>
<td>Pouch</td>
<td>1pc; Blue</td>
</tr>
<tr>
<td>Necklace</td>
<td>1pc; Heart shape; Gold</td>
</tr>
<tr>
<td>Shoes</td>
<td>1 pair; Red; Size 6</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>John Smith</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
<td valign="top"><span class="closedArrow"> JANE </span></td>
<td valign="top" class="collapsed">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num grey"><b>1</b></div>
<p><span>PACKING</span><span>IN PROGRESS</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>2</b></div>
</li>
<li class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num"><b>5</b></div>
</li>
<li class="closed">
<div class="num"><b>6</b></div>
</li>
<li class="closed">
<div class="num"><b>7</b></div>
</li>
<li class="closed">
<div class="num"><b>8</b></div>
</li>
<li class="closed">
<div class="num"><b>9</b></div>
</li>
<li class="closed">
<div class="num last"><b>10</b></div>
</li>
</ol>
</td>
<td colspan="2" class="expanded">
<ol class="steps">
<li class="open">
<div class="wrap">
<div class="num green"><b>1</b></div>
<p><span>ORDER</span><span>ONGOING</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>2</b></div>
<p><span>PACKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>3</b></div>
<p><span>CHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>RECHECKING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>5</b></div>
<p><span>SHIPPING</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>6</b></div>
<p><span>COURIER</span><span>NOT YET DONE</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>7</b></div>
<p><span>DELIVERY</span><span>NOT YET DONE</span></p>
</div>
<li class="open">
<div class="wrap">
<div class="num black last"><b>10</b></div>
<p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
</div>
</li>
</ol>
<hr>
<div class="tableDiv">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<center>
<ul class="nav nav-tabs" role="tablist" style="width: 800px">
<li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
<li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
<li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
<li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
</ul>
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section5">
<table border="2px">
<tr>
<th>ITEM</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Dress</td>
<td>1pc; Yellow</td>
</tr>
<tr>
<td>Hat</td>
<td>1pc; Green</td>
</tr>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section6">
<table border="2px">
<tr>
<th>CUSTOMER</th>
</th>
<th>DETAILS</th>
</tr>
<tr>
<td>NAME</td>
<td>Jane Doe</td>
</tr>
<tr>
<td>SHIPPING ADDRESS</td>
<td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
</tr>
<tr>
<td>TELEPHONE NUMBER</td>
<td>1-541-754-3010</td>
</tr>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section7">
<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
<table id="Section3_table" name="Section3">
<tr>
<th>ISSUE</th>
<th>DETAILS</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</center>
</table><br>
<hr>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section8">
<table border="2px">
<tr>
<th>COURIER NAME</th>
<th>DATE SHIPPED</th>
<th>DATE ARRIVED</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>answered Mar 29 at 9:00
Zakaria AcharkiZakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
answered Mar 29 at 9:00
Zakaria AcharkiZakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
answered Mar 29 at 9:00
Zakaria AcharkiZakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
answered Mar 29 at 9:00
Zakaria AcharkiZakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
58.4k13 gold badges45 silver badges74 bronze badges
Congratulations, you've earned the VoteUp privilege consider to use it if any answer helps you if any answer is what you're looking for Mark it as the correct answer For the future readers.
– Zakaria Acharki
Mar 29 at 9:04
add a comment |
Congratulations, you've earned the VoteUp privilege consider to use it if any answer helps you if any answer is what you're looking for Mark it as the correct answer For the future readers.
– Zakaria Acharki
Mar 29 at 9:04
Congratulations, you've earned the VoteUp privilege consider to use it if any answer helps you if any answer is what you're looking for Mark it as the correct answer For the future readers.
– Zakaria Acharki
Mar 29 at 9:04
Congratulations, you've earned the VoteUp privilege consider to use it if any answer helps you if any answer is what you're looking for Mark it as the correct answer For the future readers.
– Zakaria Acharki
Mar 29 at 9:04
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368435%2fdisplay-table-properly-using-tabs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
