Here I write simple html and javascript code for click and open div container.
.html.png)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
border-spacing: 0;
}
body {
font-family: "Lato", sans-serif;
padding: 0;
margin: 0;
}
/* Style of container */
.container {
padding: 20px;
background-color: #f2f2f2;
height: 100%;
width: 100%;
display: inline-block;
min-height: 100vh;
}
.full-box {
width: 100%;
display: flex;
align-items: flex-start;
}
.full-box .left-sidebar {
width: 450px;
position: sticky;
top: 20px;
}
.full-box .right-data {
width: calc(100% - 475px);
margin-left: 25px;
position: sticky;
top: 20px;
min-height: calc(100vh - 40px);
padding: 25px;
background-color: #ffffff;
overflow-y: auto;
}
/* Style the tab */
.tab {
float: left;
background-color: #ffffff;
width: 100%;
min-height: 300px;
padding: 25px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: #ffffff;
color: #49affa;
border: 1px solid #49affa;
padding: 20px 16px;
width: 100%;
margin-bottom: 15px;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s ease-in-out;
font-size: 17px;
font-weight: 600;
position: relative;
}
.tab button:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 7px;
right: 25px;
border: 3px solid #49affa;
border-left: 0;
border-top: 0;
transform: rotate(45deg);
margin: auto 0;
transition: 0.3s ease-in-out;
}
/* Change background color of buttons on hover and active */
.tab button:hover,
.tab button.active {
background-color: #49affa;
color: #ffffff;
}
.tab button.active:after,
.tab button:hover:after {
border-color: #ffffff;
}
.tab button.active:after {
transform: rotate(-45deg);
bottom: 2px;
}
/* Style the tab content */
.tabcontent {
float: left;
background-color: #ffffff;
width: 100%;
}
.vesseltypes {
text-align: center;
font-weight: 600;
display: inline-block;
margin-bottom: 25px;
font-size: 22px;
line-height: 30px;
color: #2b2b5c;
}
.tabcontent1 {
float: left;
border: 0;
width: 100%;
}
table {
overflow: auto;
}
table thead {
position: sticky;
top: 0;
}
table thead tr th,
table tbody tr td {
min-width: 250px;
}
table thead tr th {
background-color: #49affa;
padding: 20px 16px;
color: #ffffff;
font-size: 18px;
font-weight: 600;
}
table tbody tr td {
background-color: #f2f2f2;
padding: 14px 16px;
color: #475483;
font-size: 16px;
font-weight: 600;
}
table tbody tr:first-child td {
border-top: 0 !important;
}
@media all and (max-width: 991px) {
.container {
padding: 15px;
}
.tab {
padding: 20px;
}
.full-box .left-sidebar {
width: 300px;
}
.full-box .right-data {
width: calc(100% - 300px);
min-height: calc(100vh - 30px);
padding: 20px;
}
}
@media all and (max-width: 767px) {
.full-box {
width: 100%;
display: block;
}
.full-box .left-sidebar {
width: 100%;
display: block;
margin-bottom: 20px;
position: unset;
}
.full-box .right-data {
width: 100%;
display: block;
position: unset;
margin-left: 0;
min-height: unset;
height: 100%;
padding: 0;
background: transparent;
}
.full-box .right-data .tabcontent1 table {
margin-top: 20px;
}
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="container">
<div class="full-box">
<div class="left-sidebar">
<div class="tab">
<span class="vesseltypes"><strong>Vessel Types</strong></span>
<button
class="tablinks"
onclick="openCity(event, 'Barge')"
id="defaultOpen"
>
Barge
</button>
<button class="tablinks" onclick="openCity(event, 'BulkCarrier')">
Bulk Carrier
</button>
<button
class="tablinks"
onclick="openCity(event, 'CableLayingVessel')"
>
Cable Laying Vessel
</button>
<button class="tablinks" onclick="openCity(event, 'CargoBarge')">
Cargo Barge
</button>
<button class="tablinks" onclick="openCity(event, 'Generalcargo')">
General Cargo
</button>
<button class="tablinks" onclick="openCity(event, 'JackupVessel')">
Jack up Vessel
</button>
<button class="tablinks" onclick="openCity(event, 'LNG')">
LNG
</button>
<button class="tablinks" onclick="openCity(event, 'OilTanker')">
Oil Tanker
</button>
<button
class="tablinks"
onclick="openCity(event, 'ResearchVessel')"
>
Research Vessel
</button>
<button
class="tablinks"
onclick="openCity(event, 'Semisubmersible')"
>
Semi-submersible
</button>
<button class="tablinks" onclick="openCity(event, 'SupplyVessel')">
Supply Vessel
</button>
<button class="tablinks" onclick="openCity(event, 'Tug')">
Tug
</button>
</div>
</div>
<div class="right-data">
<div id="all" class="tabcontent1">
<table width="100%" border="1">
<thead>
<tr>
<th width="50%">Services</th>
<th width="50%">Locations</th>
</tr>
</thead>
</table>
</div>
<div id="Barge" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">New Delivery</td>
<td width="50%">Wilhelmsen, Germany</td>
</tr>
</tbody>
</table>
</div>
<div id="BulkCarrier" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Change of Management</td>
<td width="50%">Kobe, Japan</td>
</tr>
<tr>
<td>Change of Management</td>
<td>Iskenderun, Turkey</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Tacoma, USA</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Port Rades, Tunisia</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Oita, Japan</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>New York USA</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Gunsan, S.Korea</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Dnipro-Buzkyi, Ukraine</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Casablanca, Morocco</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Camden USA</td>
</tr>
<tr>
<td>PSC preparation & Training</td>
<td>Port Rades, Tunisia</td>
</tr>
<tr>
<td>Safety Inspection</td>
<td>Oita, Japan</td>
</tr>
<tr>
<td>Safety Inspection</td>
<td>Gunsan, S.Korea</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Oita, Japan</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Kobe, Japan</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Dnipro-Buzkyi, Ukraine</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Casablanca, Morocco</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Camden USA</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>Tacoma, USA</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>New York USA</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>Camden USA</td>
</tr>
</tbody>
</table>
</div>
<div id="CableLayingVessel" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Safety Inspection</td>
<td width="50%">Middlesbrough, UK</td>
</tr>
<tr>
<td>Safety Inspection</td>
<td>Middlesbrough, UK</td>
</tr>
<tr>
<td>Safety Inspection</td>
<td>Hitachi, Japan</td>
</tr>
<tr>
<td>SSA /SSP</td>
<td>Brattvaag, Norway</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Pikkala, Finland</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Hitachi, Japan</td>
</tr>
<tr>
<td>New Delivery</td>
<td>Brattvaag, Norway</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>Middlesbrough, UK</td>
</tr>
<tr>
<td>USCG preparation& Training</td>
<td>Eemshaven, Netherlands</td>
</tr>
</tbody>
</table>
</div>
<div id="CargoBarge" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Heavy lift -Offshore operation</td>
<td width="50%">Sunderland, UK</td>
</tr>
</tbody>
</table>
</div>
<div id="Generalcargo" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Heavy lift -Offshore operation</td>
<td width="50%">Sunderland, UK</td>
</tr>
<tr>
<td width="50%">Heavy lift -Offshore operation</td>
<td width="50%">Leith, Scotland</td>
</tr>
</tbody>
</table>
</div>
<div id="JackupVessel" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Vessel Assessment</td>
<td width="50%">Remote Assessment</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">QIDONG, China</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">Flushing, Netherlands</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">QIDONG, China</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">QIDONG, China</td>
</tr>
<tr>
<td width="50%">ON Hire /Off Hire Survey</td>
<td width="50%">Falmouth, UK</td>
</tr>
<tr>
<td width="50%">ON Hire /Off Hire Survey</td>
<td width="50%">Falmouth, UK</td>
</tr>
</tbody>
</table>
</div>
<div id="LNG" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Navigation Audit</td>
<td width="50%">Skagen, Denmark</td>
</tr>
<tr>
<td width="50%">Navigation Audit</td>
<td width="50%">Fos, France</td>
</tr>
<tr>
<td width="50%">Navigation Audit</td>
<td width="50%">Rotterdam, Netherlands</td>
</tr>
<tr>
<td width="50%">Mooring Audit</td>
<td width="50%">Rotterdam, Netherlands</td>
</tr>
</tbody>
</table>
</div>
<div id="OilTanker" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Safety Inspection</td>
<td width="50%">Amsterdam, Netherlands</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Rotterdam, Netherlands</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Qinzhou, China</td>
</tr>
<tr>
<td>Technical Inspection</td>
<td>Rotterdam, Netherlands</td>
</tr>
<tr>
<td>Pre-purchase Inspection</td>
<td>Hull, UK</td>
</tr>
<tr>
<td>Pre-purchase Inspection</td>
<td>Singapore</td>
</tr>
<tr>
<td>Pre-purchase Inspection</td>
<td>Rotterdam, UK</td>
</tr>
<tr>
<td>Pre vetting Inspection & Training</td>
<td>Fujairah, UAE</td>
</tr>
<tr>
<td>Pre vetting Inspection & Training</td>
<td>Athens, Greece</td>
</tr>
<tr>
<td>Pre vetting Inspection & Training</td>
<td>Singapore</td>
</tr>
<tr>
<td>Pre vetting Inspection & Training</td>
<td>PIstanbul, Turkey</td>
</tr>
<tr>
<td>Condition Assessment</td>
<td>Algeciras, Spain</td>
</tr>
<tr>
<td>Condition Assessment</td>
<td>Kaarsto, Norway</td>
</tr>
<tr>
<td>Change of Management</td>
<td>Balboa, Panama</td>
</tr>
<tr>
<td>Change of Management</td>
<td>Balboa, Panama</td>
</tr>
<tr>
<td>Dry dock specification</td>
<td>Istanbul, Turkey</td>
</tr>
<tr>
<td>Incident Investigation</td>
<td>Mersin, Turkey</td>
</tr>
<tr>
<td>ISM / ISPS Audit</td>
<td>Singapore</td>
</tr>
<tr>
<td>SSA/SSP</td>
<td>Istanbul, Turkey</td>
</tr>
<!-- <tr>
<td>USCG preparation& Training</td>
<td>New York USA</td>
</tr> -->
</tbody>
</table>
</div>
<div id="ResearchVessel" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">Cork, Ireland</td>
</tr>
<tr>
<td width="50%">Safety Inspection</td>
<td width="50%">Cork, Ireland</td>
</tr>
</tbody>
</table>
</div>
<div id="Semisubmersible" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">Nantong, China</td>
</tr>
<tr>
<td width="50%">Condition Assessment</td>
<td width="50%">Nantong, China</td>
</tr>
</tbody>
</table>
</div>
<div id="SupplyVessel" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">On Hire/Off Hire vessel audit</td>
<td width="50%">Rotterdam, Netherlands</td>
</tr>
</tbody>
</table>
</div>
<div id="Tug" class="tabcontent">
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%">USCG preparation& Training</td>
<td width="50%">Middlesbrough, UK</td>
</tr>
<tr>
<td width="50%">USCG preparation& Training</td>
<td width="50%">Eemshaven, Netherlands</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
No comments:
Post a Comment