Script (i think) Error

RinaB · April 7, 2020

HI, if someone PLEASE help me out. I think the issue is conflicting script cause alone my accordions work. So how can i edit the below code so that the second drop down menu's tab function shows up once the accordion is dropped down (the first does accordion works...)

Here is my code:

<style>
.so-tab {
position: relative;
width: 100%;
overflow: hidden;
margin: 10 0px 0 0;
}
.so-tab label {
position: relative;
display: block;
padding: 16px;
font-family: Helvetica;
margin-bottom: 15px;
line-height: normal;
font-weight: bold;
cursor: pointer;
background-color: #eee;

}
.so-tab label:hover {
background-color: #ccc;

}

.so-tab input {
position: absolute;
opacity: 0;
z-index: -1;
}
.so-tab-content {
max-height: 0;
overflow: hidden;
transition: max-height .35s;
}
/* :checked */
.so-tab input:checked ~ .so-tab-content {
max-height: none;
}
/* Icon */
.so-tab label::after {
position: absolute;
right: 0;
top: 0;
display: block;

}
.so-tab input[type=checkbox] + label::after {
content: "+";
padding: 16px;
}
.so-tab input[type=checkbox]:checked + label::after {
content: "-";
padding: 16px;
}

</style>

<div class="so-accordion-wrapper">
<div class="so-tab">
<input id="so-tab-1" type="checkbox" name="tabs" />
<label for="so-tab-1">Shoe Length Chart</label>
<div class="so-tab-content">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Helvetica;}

/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'LON')" id="defaultOpen">Inches</button>
<button class="tablinks" onclick="openCity(event, 'PAR')">CM</button>
</div>

<div id="LON" class="tabcontent">
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: Helvetica;
border-collapse: collapse;
width: 100%;
table-layout: fixed
}

#customers td, #customers th {
border: 1px solid #ddd;
padding: 5px;
text-align: center;

}

#customers tr:nth-child(even){background-color: #eee;}

#customers tr:hover {background-color: #696969;}

#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #FFFFFF;
color: black;
}
</style>
</head>
<body>
<table id="customers">

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: Helvetica;
border-collapse: collapse;
width: 100%;
table-layout: fixed
}

#customers td, #customers th {
border: 1px solid #ddd;
padding: 5px;
text-align: center;

}

#customers tr:nth-child(even){background-color: #eee;}

#customers tr:hover {background-color: #696969;}

#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #FFFFFF;
color: black;
}
</style>
</head>
<body>
<table id="customers">
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
table-layout: fixed
}

#customers td, #customers th {
border: 1px solid #ddd;
padding: 5px;
text-align: center;

}

#customers tr:nth-child(even){background-color: #eee;}

#customers tr:hover {background-color: #696969;}

#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #FFFFFF;
color: black;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<td colspan="2" width="157">
WOMEN
</td>
<td colspan="2" width="150">
MEN
</td>
</tr>
<tr>
<td width="85">
North American Sizing
</td>
<td width="72">
Foot Length (Inches)
</td>
<td width="78">
North American Sizing
</td>
<td width="72">
Foot Length (Inches)
</td>
</tr>
<tr>
<td width="85">
4
</td>
<td width="72">
8 3/16
</td>
<td width="78">
6
</td>
<td width="72">
9 1/4
</td>
</tr>
<tr>
<td width="85">
4.5
</td>
<td width="72">
8 3/8
</td>
<td width="78">
6.5
</td>
<td width="72">
9 1/2
</td>
</tr>
<tr>
<td width="85">
5
</td>
<td width="72">
8 1/2
</td>
<td width="78">
7
</td>
<td width="72">
9 5/8
</td>
</tr>
<tr>
<td width="85">
5.5
</td>
<td width="72">
8 3/4
</td>
<td width="78">
7.5
</td>
<td width="72">
9 3/4
</td>
</tr>
<tr>
<td width="85">
6
</td>
<td width="72">
8 7/8
</td>
<td width="78">
8
</td>
<td width="72">
9 15/16
</td>
</tr>
<tr>
<td width="85">
6.5
</td>
<td width="72">
9 1/16
</td>
<td width="78">
8.5
</td>
<td width="72">
10 1/8
</td>
</tr>
<tr>
<td width="85">
7
</td>
<td width="72">
9 1/4
</td>
<td width="78">
9
</td>
<td width="72">
10 1/4
</td>
</tr>
<tr>
<td width="85">
7.5
</td>
<td width="72">
9 3/8
</td>
<td width="78">
9.5
</td>
<td width="72">
10 7/16
</td>
</tr>
<tr>
<td width="85">
8
</td>
<td width="72">
9 1/2
</td>
<td width="78">
10
</td>
<td width="72">
10 9/16
</td>
</tr>
<tr>
<td width="85">
8.5
</td>
<td width="72">
9 11/16
</td>
<td width="78">
10.5
</td>
<td width="72">
10 3/4
</td>
</tr>
<tr>
<td width="85">
9
</td>
<td width="72">
9 7/8
</td>
<td width="78">
11
</td>
<td width="72">
10 15/16
</td>
</tr>
<tr>
<td width="85">
9.5
</td>
<td width="72">
10
</td>
<td width="78">
11.5
</td>
<td width="72">
11 1/8
</td>
</tr>
<tr>
<td width="85">
10
</td>
<td width="72">
10 3/16
</td>
<td width="78">
12
</td>
<td width="72">
11 1/4
</td>
</tr>
<tr>
<td width="85">
10.5
</td>
<td width="72">
10 5/16
</td>
<td width="78">
12.5
</td>
<td width="72">
11 7/16
</td>
</tr>
<tr>
<td width="85">
11
</td>
<td width="72">
10 1/2
</td>
<td width="78">
13
</td>
<td width="72">
11 9/16
</td>
</tr>
<tr>
<td width="85">
11.5
</td>
<td width="72">
10 11/16
</td>
<td width="78">
13.5
</td>
<td width="72">
11 3/4
</td>
</tr>
<tr>
<td width="85">
12
</td>
<td width="72">
10 7/8
</td>
<td width="78">
14
</td>
<td width="72">
11 7/8
</td>
</tr>
<tr>
<td width="85">
12.5
</td>
<td width="72">
11 1/16
</td>
<td width="78">
14.5
</td>
<td width="72">
12 1/16
</td>
</tr>
<tr>
<td width="85">
13
</td>
<td width="72">
11 1/4
</td>
<td width="78">
15
</td>
<td width="72">
12 3/16
</td>
</tr>
<tr>
<td width="85">
13.5
</td>
<td width="72">
11 3/8
</td>
<td width="78">
15.5
</td>
<td width="72">
12 7/16
</td>
</tr>
</table>
</body>
</html>

Sign In

Script (i think) Error

Recommended Posts

RinaB

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity