How can make side lines for every table tr, like tree structure?
Also, Nested tables will come in some of tr.
Sample code Fiddle Link:
#smsTree {
margin-top: 30px;
}
#smsTree tr:not(:last-child) {
border-left: 1px solid #ccc;
}
#smsTree tr:not(:last-child) + #smsTree tr:not(:first-child) {
content: "";
position: absolute;
left: 35px;
z-index: 100;
width: 20px;
height: 100px;
border-bottom: 1px solid #ccc;
}
#smsTree tr:first-child:before {
border-bottom: none;
}
#smsTree tr:before {
content: "";
position: absolute;
left: 20px;
z-index: 100;
width: 20px;
height: 10%;
border-bottom: 1px solid #ccc;
}
#smsTree tr:last-child:before {
border-left: 1px solid #ccc;
}
<div id="smsTree">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/minus.gif");"> </div>
</td>
<td width="16px" style="display: none;">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/folderOpen.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlack" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)" style="text-decoration: none;"><strong>1mnthuser [Content Provider]<strong></strong></strong></font></span></td>
</tr>
<tr style="">
<td> </td>
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/minus.gif");"> </div>
</td>
<td width="16px" style="display: none;">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/folderOpen.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlack" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)"><strong>BMS_MKT_608[Market Plan]<strong></strong></strong></font></span></td>
</tr>
<tr style="">
<td> </td>
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/blank.gif");"> </div>
</td>
<td width="16px">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/leaf.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlue" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)"><strong>sss<strong></strong></strong></font></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td> </td>
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/blank.gif");"> </div>
</td>
<td width="16px">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/leaf.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlue" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)"><strong>sss<strong></strong></strong></font></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
css:
#smsTree tr:not(:last-child) {
border-left: 1px solid #ccc;
}
#smsTree tr:first-child:before {
border-bottom: none;
}
#smsTree tr:before {
content: "";
position: absolute;
left: 20px;
z-index: 100;
width: 20px;
height: 10%;
border-bottom: 1px solid #ccc;
}
#smsTree tr:last-child:before {
border-left: 1px solid #ccc;
}
Please check above fiddle link.
Snap of Design Tree structure:
Normally border does not apply to table border.you need to add border-collapse to table. You can use below code. specifications
table {
border-collapse: collapse;
}
table tr
{
border-left:1px solid black;
}
This a simple example that you want to achieve but it is done with a list. I never saw done with tables. Why? Because you can't control the space between the elements as effective as in a list and also because tables are just to display tabular data.
I edit the code and I added icons with font-awesome to be mo realistic with your design.
I hope helps
ul {
border-left: 1px dotted;
list-style: none;
padding-left: 12px;
}
li {
position: relative;
padding-left: 22px;
}
li::before {
background-color: #fff;
content: '';
height: 10px;
width: 10px;
position: absolute;
left: -12px;
top: 10px;
border-top: 1px dotted;
}
ul.tree > li:first-child::before {
width: 11px;
height: 10px;
left: -13px;
top: 0px;
border: 0;
border-bottom: 1px dotted;
}
li:last-child::before {
width: 11px;
height: 10px;
left: -13px;
}
ul.tree>li::after,
ul.tree>li>ul>li::after {
background-color: red;
content: '';
height: 10px;
width: 10px;
position: absolute;
left: -18px;
top: 6px;
z-index: 1;
}
ul.tree>li.open::after,
ul.tree>li>ul>li.open::after {
background-color: blue;
}
li ul {
margin: 5px 7px;
}
li i {
margin-right: 5px;
position: absolute;
top: 2px;
left: 2px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<ul class="tree">
<li class="open"><i class="fas fa-address-book"></i>06_midh_http_user
<ul>
<li class="open"><i class="fas fa-address-book"></i>BMS_MKT_303
<ul>
<li><i class="fas fa-address-book"></i>6d</li>
</ul>
</li>
<li><i class="fas fa-address-book"></i>BMS_MKT_304</li>
<li><i class="fas fa-address-book"></i>BMS_MKT_305</li>
<li><i class="fas fa-address-book"></i>MS_MKT_307</li>
<li><i class="fas fa-address-book"></i>BMS_MKT_308</li>
</ul>
</li>
<li><i class="fas fa-address-book"></i>1111</li>
<li><i class="fas fa-address-book"></i>1112</li>
</ul>
Related
I want a textarea inside a cell to be focused when I click in the white area of the cell.
At the same time it is also possible to filter that the function is only applied to cells with the class: "use-keyboard-input".
Thanks!
function textareaFocus(){
$(this).find('textarea').each(function(){
$(this).focus();
});
console.log('test');
}
table{
width: 100% !important;
vertical-align: middle;
border-spacing:0;
border-collapse: collapse;
background-color: white;
}
textarea{
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.8vw;
vertical-align: middle;
text-align: center;
padding: 0;
color: var(--fontDark);
background-color: red;
}
.routeTable td{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
vertical-align: middle;
}
.routeTable th{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
}
.routeTable tr{
border: 1px solid black;
font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable"style="border: none;">
<tbody style="border: none;">
<tr style=" height: 10em;"><td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td><td onclick="textareaFocus();" colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td><td onclick="textareaFocus(); colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td><td onclick="textareaFocus(); colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
</tr>
</tbody>
</table>
#Ali's answer is correct, you can also do it a bit more abstract way.
$('textarea').on('focus', function() {
console.log('textarea focused');
});
$('textarea').parent('td').on('click', function() {
console.log('cell clicked');
$(this).find('textarea:first-child').focus();
})
table{
width: 100% !important;
vertical-align: middle;
border-spacing:0;
border-collapse: collapse;
background-color: white;
}
textarea{
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.8vw;
vertical-align: middle;
text-align: center;
padding: 0;
color: var(--fontDark);
background-color: red;
}
.routeTable td{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
vertical-align: middle;
}
.routeTable th{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
}
.routeTable tr{
border: 1px solid black;
font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable"style="border: none;">
<tbody style="border: none;">
<tr style=" height: 10em;">
<td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td>
<td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
<td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td>
<td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
<td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td>
<td colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
</tr>
</tbody>
</table>
You need to pass a reference object to the function to determine which cell is clicked. So I updated the function to textareaFocus(obj) and passed td by adding (this) as a parameter to the function:
function textareaFocus(obj){
$(obj).find('textarea').focus();
console.log('test');
}
table{
width: 100% !important;
vertical-align: middle;
border-spacing:0;
border-collapse: collapse;
background-color: white;
}
textarea{
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.8vw;
vertical-align: middle;
text-align: center;
padding: 0;
color: var(--fontDark);
background-color: red;
}
.routeTable td{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
vertical-align: middle;
}
.routeTable th{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
}
.routeTable tr{
border: 1px solid black;
font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable" style="border: none;">
<tbody style="border: none;">
<tr style="height: 10em;">
<td colspan="3" style="background-color: var(--dark); width: 15%;">Cell-1:</td>
<td colspan="3" onclick="textareaFocus(this);">
<textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
<td colspan="2" style="background-color: var(--dark); width: 15%">Cell-2</td>
<td onclick="textareaFocus(this);" colspan="3">
<textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
<td colspan="3" style="background-color: var(--dark); width: 15%">Cell-3:</td>
<td colspan="4" onclick="textareaFocus(this);">
<textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
</tr>
</table>
You can also do that without calling the function through onclick but by binding a listener to td elements:
$(document).ready(function(){
$(".use-keyboard-input").click(function(){
$(this).find("textarea").focus();
})
})
I have this accordion. Everything is ok except opening. When I press one, it opens both. I need to open just that one which I click and when I click second I want to hide first. Need to make it toggle
When I change display:flex to column it works properly but in row it opens both on click. It doesn't make sense for me what is logic behind it.
$(document).ready(function(){
$('.accordion-list > li > .answer').hide();
$('.accordion-list > li').click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active").find(".answer").slideUp();
} else {
$(".accordion-list > li.active .answer").slideUp();
$(".accordion-list > li.active").removeClass("active");
$(this).addClass("active").find(".answer").slideDown();
}
return false;
});
});
ul.accordion-list {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
height: auto;
padding: 20px;
margin: 0;
list-style: none;
background-color: #f9f9fa;
}
ul.accordion-list li {
position: relative;
display: block;
width: 100%;
height: auto;
background-color: #F36F20;
padding: 20px;
margin: 0 auto 15px auto;
border: 1px solid #eee;
border-radius: 5px;
cursor: pointer;
color: #fff;
}
ul.accordion-list li.active h3:after {
transform: rotate(45deg);
}
ul.accordion-list li h3 {
font-weight: 700;
position: relative;
display: block;
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0;
font-size: 15px;
letter-spacing: 0.01em;
cursor: pointer;
}
ul.accordion-list li div.answer {
position: relative;
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
cursor: pointer;
}
ul.accordion-list li div.answer p {
position: relative;
display: block;
font-weight: 300;
padding: 10px 0 0 0;
cursor: pointer;
line-height: 150%;
margin: 0 0 15px 0;
font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion-list">
<li>
<h3>info</h3>
<div class="answer">
<table style="width: 100%; text-align: center;">
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkjkj</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjjkjk</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">kjjkkj:</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjk</td>
</tr>
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkjk:</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjk</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">kjkj:</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjkj</td>
</tr>
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkjkj:</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjk</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">kjkjkj</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjkjj,00€</td>
</tr>
</table>
</div>
</li>
<li>
<h3>second</h3>
<div class="answer">
<table style="width: 100%; text-align: center;">
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkj</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjkjk</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">jkkjk</td>
<td class="cell" style="float: right; padding-right: 1rem;">kjkjlj</td>
</tr>
<tr style="background-color: #F36F20; color: #fff;">
<td class="cell" style="float: left; padding-left: 1rem;">kjkljlk</td>
<td class="cell" style="float: right; padding-right: 1rem;">jlklkjljk€</td>
</tr>
<tr>
<td class="cell" style="float: left; padding-left: 1rem;">ljklkjljk:</td>
<td class="cell" style="float: right; padding-right: 1rem;">20.12.2025</td>
</tr>
</table>
</div>
</li>
</ul>
It is a CSS problem. The parent is flex, that is why it is giving all the available space to li when set to auto. Just set height of li to fit-content or min-content or max-content:
ul.accordion-list li {
height: fit-content;
}
This is not a jQuery problem but a CSS one.
I've been experimenting in JSFiddle and changing the height of the LI from auto to min-content seems to work:
height: min-content;
https://jsfiddle.net/6w9j84rm/
You can clearly see the effect by disabling the jQuery code.
Set the rule margin-bottom: auto for ul.accordion-list li. This rule has excellent cross-browser compatibility!
And it works well.
It should be like this:
ul.accordion-list li {
position: relative;
display: block;
width: 100%;
height: auto;
background-color: #F36F20;
padding: 20px;
margin: 0 auto 15px auto;
border: 1px solid #eee;
border-radius: 5px;
cursor: pointer;
color: #fff;
margin-bottom: auto;
}
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>
I'm trying to sort html elements in JS so it looks like this,
I have it so when you hover over them, they expand with extra info but only the last one in every row gets that feature and I can't figure out why, (i've been trying for hours) if someone could help me i'd appreciate it.
i'll post it link a jsfiddle and ill post my js code here so it's eaiser to read, and all the css/html/js code with be on the jsfiddle,
https://jsfiddle.net/b7dt0xwj/
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'] //'saturday', "sunday"];
var show = document.getElementsByTagName("tr");
function sortElements(){
// console.log(show)
for (var i=0; i<4; i++){
var dayHeader = document.getElementById(days[i])
var showInfo = document.getElementsByClassName("info")[1]
// console.log(showInfo)
for(var j=0; j<show.length; j++){
if (show[j].getAttribute("day") === dayHeader.getAttribute("id")){
dayHeader.parentNode.insertBefore(show[j], dayHeader.nextSibling);
console.log(show[j])
console.log(j)
dayHeader.parentNode.insertBefore(showInfo, show[j].nextSibling);
}
}
}
}
I used jQuery's .insertAfter after finding the appropriate day. However, I noticed that you rely on the next element to come directly after. So, I moved that element as well.
function sortElements(){
$(".main table tr[day]").each(function () {
var $this = $(this),
$nextEl = $this.next();
$this.insertAfter($this.parent().find("#" + $this.attr("day")));
$nextEl.insertAfter($this)
});
}
sortElements();
body {
font-family: "Roboto";
padding: 0px;
margin: 0px;
background-color: #dddcdc;
}
p {
display: inline;
}
.logo {
display: inline-block;
width: 120px;
margin-top: 10px;
margin-right: 0px;
margin-left: 75px;
font-weight: bold;
color: #ff0808;
font-size: 28px;
}
.logo a {
text-decoration: none;
color: red;
}
.logo a:hover {
color: #e20505;
}
.navbar {
background-color: #e7e6e6;
box-shadow: 1px 1px 7px #5c5c5c;
/* x, distance */
margin: 0px;
height: 52px;
}
.navbar-links {
display: inline;
}
.navbar-links p a {
margin: 0px 0px 0px 65px;
padding: 0px;
display: inline;
font-weight: bold;
text-transform: uppercase;
color: #5c5c5c;
font-size: 18px;
text-decoration: none;
}
p a:hover {
padding-bottom: 6px;
border-bottom: 2px solid #f87531;
}
div p .orange-btn {
position: relative;
bottom: 5px;
left: 230px;
border: 1px solid #f87531;
border-radius: 5px;
color: white;
margin-bottom: 5px;
font-size: 13px;
padding: 12px;
background-color: #f87531;
}
div p .orange-btn:hover {
background-color: #e06f35;
}
.main {
box-shadow: 0 4px 2px -4px #5c5c5c;
margin: 60px 66px;
background-color: #f2f2f2;
}
table {
width: 100%;
border-collapse: collapse;
border-top: none;
border-left: none;
border-right: none;
}
th,
td {
border-left: none;
border-right: none;
padding: 4px 0px;
width: 33%;
text-align: center;
font-size: 18px;
font-weight: 500;
/*border: 1px solid black;*/
}
th {
font-size: 20px;
padding: 5px;
font-weight: bolder;
}
tbody tr:hover {
background-color: #f87531;
cursor: default;
color: white;
}
.day {
width: 99%;
color: #5c5c5c;
text-align: center;
font-weight: 900;
font-size: 25px;
letter-spacing: 2px;
background-color: #dddcdc;
}
.airing {
background-color: #16c966;
}
.info {
/*display: none;*/
}
tr+tr.info {
color: #5c5c5c;
visibility: collapse;
height: 0px;
/*opacity: 0;*/
transition: height 0.3s linear, opacity 0.3s linear;
}
tr:hover+tr.info {
border: 1px solid #f87531;
height: 100px;
opacity: 1;
visibility: visible;
display: table-row;
}
.info:hover {
color: #5c5c5c;
background-color: #f2f2f2;
height: 100px;
opacity: 1px;
visibility: visible;
display: table-row;
border: 1px solid #f87531;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<table border="1">
<thead>
<tr>
<th>Show name</th>
<th>Season | Episode</th>
<th>Day of Return</th>
</tr>
</thead>
<tbody>
<tr id="monday">
<td class="day"colspan="3">
Monday
</td>
</tr>
<tr id="tuesday">
<td class="day" colspan="3">
Tuesday
</td>
</tr>
<tr id="wednesday">
<td class="day" colspan="3">
Wensday
</td>
</tr>
<tr id="thursday">
<td class="day" colspan="3">
Thursday
</td>
</tr>
<tr id="friday">
<td class="day" colspan="3">
Friday
</td>
</tr>
<tr class="airing" day="monday">
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr class="info">
<td colspan="3">show info here</td>
</tr>
<!-- -->
<tr class="airing" day="monday">
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr class="info">
<td colspan="3">show info here</td>
</tr>
<!-- -->
<tr day="tuesday">
<td>arrow</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>
You are not calling the sortElement function. add the following at the bottom of your script.
sortElements();
In the begining I have to say I am pure newbie in coding (especially in JS and jQuery) and I have a problem that I really cannot solve since few days.
I want to create sequence animation that will be animated depending on scroll position. I found the source online with the code for that ---> THIS https://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer/ <-- The thing is I have a massive problem to put them togheter...
I would love to have this scrolabble animation on the right side of the page (div called "right") but whenever I am doing this, the animation is not running...
Below you can see my code.
Would be more than happy to hear from you guys with some help!
$(document).ready(function() {
$(document).mousemove(function(e) {
$('.project1').offset({
left: e.pageX + 20,
top: e.pageY + 20
});
});
$(".numero1").hover(function () {
$('.project1').css({opacity : 1.0});
},
function () {
$('.project1').css({opacity : 0.0});
}
);
});
body {
background-color:#ffffff;
font:300 Arial, sans-serif;
top:0px;
margin: 0;
padding: 0;
cursor: url('./img/dot1.ico'), auto;
overflow:hidden;
}
*{
border:none;
}
a{
text-decoration:none;
}
/* unvisited link */
a:link {
color: black;
}
/* visited link */
a:visited {
color: black;
}
a:hover{
color: black;
font-family: Arial;
font-style:italic;
}
.left a{
color: black;
font-family: Arial;
font-style: italic;
}
.left a:hover{
color: black;
font-family: Arial;
font-style: normal;
}
li {
list-style-type: none;
}
#container {
display: flex;
overflow: hidden;
height: 100vh;
padding-top: 100px;
position: fixed;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
.left,
.middle,
.right {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.left::-webkit-scrollbar,
.middle::-webkit-scrollbar,
.right::-webkit-scrollbar {
display: none;
}
.left {
top: 15px;
font:300 45px Arial, sans-serif, white;
font-style: normal;
line-height: 1em;
color: white;
width: 2.7%;
margin-left: 0px;
padding-left: 15px;
margin-top: -100px;
background-color: white; /* Old browsers */
/* background: -moz-linear-gradient(top, #ffb2b2 0%, #849fff 100%); /* FF3.6-15 */
/* background: -webkit-linear-gradient(top, #ffb2b2 0%,#849fff 100%); /* Chrome10-25,Safari5.1-6 */
/* background: linear-gradient(to bottom, #ffb2b2 0%,#849fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb2b2', endColorstr='#849fff',GradientType=0 ); /* IE6-9 */
border-right: 0.5px solid black;
}
.middle {
width: 28%;
padding: 10 10 0 0;
margin-top: -110px;
margin-bottom: 100px;
background-color: white;
border-right: 0.5px solid black;
}
.projects img{
width: 100%;
}
.right {
flex: 1;
padding: 0 0 0 0;
margin-top: -100px;
margin-bottom: 100px;
font: Arial, sans-serif;
background-color: white ;
font-size: 0px;
color: black;
}
.right img{
width: 100%;
}
.gallery {
margin-top: 0px;
}
.projects {
position: relative;
margin-top: 5px;
height: 70px;
padding-bottom: 50px;
font:300 22px Arial, sans-serif;
color: black;
cursor: url('./img/dot.ico'), pointer;
border-bottom: 0.5px solid black;
}
#container figure {
background: black;
margin: 0px;
line-height: 0px;
}
#container figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#container figure:hover img {
opacity: 0;
}
table .numero1{
width: 100%;
text-align: left;
}
table .numero2{
width: 100%;
text-align: left;
}
table .numero3{
margin-top: 0px;
width: 100%;
text-align: left;
}
table .numero4{
margin-top: 0px;
width: 100%;
text-align: left;
}
.numero {
padding-right: 1%;
margin-top: -5px;
width:5%;
font-size: 33px;
/* -webkit-text-stroke: 0.5px black;*/
}
.title {
padding-left: 3%;
width: 40%;
padding-right: 1%;
}
.type {
width: 30%;
padding-left: 10%;
}
.year {
width: 5%;
padding-left: 1%;
}
.project1 {
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
opacity: 0;
height: 150px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Name</title>
<meta charset="utf-8" />
<link rel="icon" href="./img/sm.png" type="image/gif" />
<link rel="stylesheet" type="text/css" href="./index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="responsiveslides.min.js"></script>
</head>
<body>
<div id="container">
<div class="left">
<a style="cursor: url('./img/dot.ico'), pointer;" href="index.html">N<br>A<br>M<br>E</a>
</div>
<div class="middle">
<div class="gallery">
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<div class="right">
</div>
</div>
</body>