We Keep Coding

Display table properly using tabs - javascript

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"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</li>
<li role="presentation"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</li>
<li role="presentation"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</li>
<li role="presentation"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</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"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</li>
<li role="presentation"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</li>
<li role="presentation"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</li>
<li role="presentation"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</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>

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"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</li>
<li role="presentation"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</li>
<li role="presentation"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</li>
<li role="presentation"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</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"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</li>
<li role="presentation"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</li>
<li role="presentation"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</li>
<li role="presentation"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</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>

Related

I am trying to recreate this order status HTML/CSS:
https://www.sitepoint.com/community/t/order-status-table-html-css-help/101907/3
And encountered the same problem with the author. The table is in collapsed form when not yet clicked then expands then an order number is chosen.
In case of having multiple account numbers, how can I open ONLY the CHOSEN ROW because in my case, it opens all the account number details, not the one chosen.
jQuery(document).ready(function() {
jQuery('.closedArrow').click(function() {
$('.expanded').toggle();
$('.collapsed').toggle();
$( "span.closedArrow" ).toggleClass( "openArrow" );
});
});
.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;
text-align: center;
}
a:hover,a:focus{
outline: none;
text-decoration: none;
}
<!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>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="multiAccount">
<tr>
<th>Account #</th>
<th>Order #</th>
<th>Current Status (Ongoing)</th>
</tr>
<tr>
<td valign="top"><span class="closedArrow">4579637</span></td>
<td valign="top"><span class="closedArrow">5822412</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 class="open">
<div class="wrap">
<div class="num grey"><b>3</b></div>
<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
</div>
</li>
<li class="closed">
<div class="num"><b>4</b></div>
</li>
<li class="closed">
<div class="num last"><b>5</b></div>
</li>
</ol></td>
<tr>
<td valign="top"><span class="closedArrow">6784120</span></td>
<td valign="top"><span class="closedArrow">7893200</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 class="closed">
<div class="num"><b>3</b></div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>4</b></div>
<p><span>Service Activation</span><span>Done: 08/25/2014</span></p>
</div>
</li>
<li class="closed">
<div class="num last"><b>5</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 Provisioning</span><span>Done: 08/25/2014</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num green"><b>2</b></div>
<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num grey"><b>3</b></div>
<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black"><b>4</b></div>
<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
</div>
</li>
<li class="open">
<div class="wrap">
<div class="num black last"><b>5</b></div>
<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
</div>
</li>
</ol>
<div class="tableDiv">
<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>Order No.</td><td>5822412</td></tr>
<tr><td>Account Name:</td><td>Mead O'Brien</td></tr>
<tr><td>Services:</td><td>UNE POTS/T-1</td></tr>
<tr><td>Installation Address:</td><td>1217 W Capitol Ave, Little Rock, AR 72201 </td></tr>
<tr><td>Project Coordinator:</td><td>John Smith</td></tr>
<tr><td>Phone:</td><td>501-375-3719</td></tr>
<tr><td>Email:</td><td>jsmith#company.com</td></tr>
</table>
</div>
</div>
</div>
</tr>
</table>
</table>
</body>
</html>

This way, only clicked row will be affected
jQuery(document).ready(function() {
jQuery('.closedArrow').click(function() {
$(this).parents('tr').children('.expanded').toggle();
$(this).parents('tr').children('.collapsed').toggle();
$(this).toggleClass( "openArrow" );
});
});

In the below drop down menu when we hover over the items, the submenu opens to the right. But, I want that it opens to the left instead.
Here the code:
html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">LARGE HOLDINGS</a>
<ul class="dropdown-menu third-menu">
<li class="dropdown-submenu active">LHO
<ul class="dropdown-menu parent third-menu">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Contact Us
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>Hotline:</b></font> 8828 5600</li>
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2 ><b>Support Mailbox:</b></font> <font face = "Barclays Sans">Compliance Application
Support L1</font></li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Application Overview
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>LHO </b></font></br></br><font size=2> Web Application to track large equity
holdings and, where appropriate, report to regulators. It is owned by the Compliance Department.</font></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">ORCHESTRIA</a>
<ul class="dropdown-menu third-menu">
<li class="dropdown-submenu active">ORCHESTRIA
<ul class="dropdown-menu parent third-menu">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Contact Us
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>Hotline:</b></font> 8828 5600</li>
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2 ><b>Support Mailbox:</b></font> <font face = "Barclays Sans">Compliance Application
Support L1</font></li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Application Overview
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>ORCHESTRIA</b></font> </br></br><font size=2> E-mail and instant messaging
monitoring and intelligent review using CA DLP.</font></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</div>
</div>
css:
div.container {
margin-left: 5%;
margin-right: 10%;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 1em white;
float: left;
}
nav {
/*background-image: url("http://teams.barclays.intranet/sites/compliancertb/Shared%20Documents/rtb3.bmp ");*/
background-color: #CCFFFF;
margin-left: 15px;
margin-right: 40px;
}
.back div {
width: 930px;
height: 400px;
background-color: #DBFFFF;
}
table {
border-collapse: collapse;
}
td {
padding: 0 13px 0 13px;
font-family: Barclays Sans;
font-size: 13px;
}
tr.spaceUnder > td
{
padding-bottom: 1em;
}
.third-menu{
position: absolute;
right:0;
top:0;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
position:relative;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 30px;
}
.mn-sidebar {
margin-left: 40px;
display: block;
position: relative;
vertical-align: middle;
padding-bottom: 1px;
background: #333333;
width: 250px;
z-index: 2;
}
#mn-cont {
display: block;
vertical-align: top;
position: relative;
padding: 10;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
border-left: 5px solid #CCFFFF;
border-right: 5px solid #CCFFFF;
}
.mn-vnavigation li a {
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/*height: 590px; */
width: 310px;
background: #333333;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: list-item;
}
.dropdown-submenu > a:after {
display: list-item;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
js:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
Then codepen link:
http://codepen.io/anon/pen/LpxVdv
Please tell me how to do that?

You can modify .dropdown-submenu:hover > .dropdown-menu css rule:
.dropdown-submenu:hover > .dropdown-menu {
display: list-item;
left: -310px;
}
Obviously you need a space on the left hand side to accommodate this:
.mn-sidebar {
margin-left: 600px;
...
}
EDIT based on below OP comments:
.dropdown-submenu:hover > .dropdown-menu {
display: list-item;
}
.dropdown-submenu:nth-child(2):hover > .dropdown-menu,
.dropdown-submenu:nth-child(2) > .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu {
display: list-item;
left: -310px;
}

I'm using the following dropdown:
CSS:
html{
height:100%;
}
body{
height:30%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
margin-left: 100px;
display: block;
position: relative;
vertical-align:top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display:none;
vertical-align: middle;
position: relative;
padding: 1;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
position: absolute;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 0;
margin-top: 0;
height: 55vh;
width: 900px;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 55vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
HTML:
</br><//br></br></br>
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
</div>
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/anon/pen/RWRdWj
Is it possible to get the sub menu (i.e., when you hover over APL & Products, then I want the 3rd level sub-menus to be displayed in front of APL & Products and not on the top). Is it possible to do that?

Try this example
You can solve this adding a custom class .third-menu on your <ul class="dropdown-menu parent third-menu">
and add this rules to new css class:
.third-menu{
position: relative;
top: -50px!important;
}
the first rule will position the submenu relative to APL & Products and the second rule will make it inline with the left menu hovered item, i.e. APL & Products

I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I hover over any list item and another sub-list opens, then I don't want the black part to extend till the end of the screen, I want that when I hover over a list item then a new list extending only till the last list item should occur. What do I change in this?
Also, when I try to use margin-left in the .mn-sidebar in CSS, then the dropdown shifts to the right, but a bullet symbol appears before the first list item (outside the dropdown menu), why is that happening? I want the dropdown menu to appear a bit on the right.

Comment the height part under .dropdown-submenu >
.dropdown-menu { css
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/* height: 101vh;*/Comment this out
width: 216px;
background: #272930;
}
And please explain what do you mean by I want the dropdown menu to appear a bit on the right.
See This
Ok try the below code
.mn-vnavigation li a {
margin-left:15px; Add this style
}
give the margin-left according to your requirement
See This

I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I open this in internet explorer, then the hover dropdowns (the dropdowns that appear on hovering over the arrow signs) don't extend till the end, as a result when I try to move to those sub-menus, they disappear!!
Anyway to fix this? Or make this on-click instead of hover???