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:
<!-- Begin Accordion Snippet -->
<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">
<p><!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">
<p><!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">
<p><strong>WOMEN</strong></p>
</td>
<td colspan="2" width="150">
<p><strong>MEN</strong></p>
</td>
</tr>
<tr>
<td width="85">
<p><strong>North American Sizing</strong></p>
</td>
<td width="72">
<p><strong>Foot Length (Inches)</strong></p>
</td>
<td width="78">
<p><strong>North American Sizing</strong></p>
</td>
<td width="72">
<p><strong>Foot Length (Inches)</strong></p>
</td>
</tr>
<tr>
<td width="85">
<p>4</p>
</td>
<td width="72">
<p>8 <sup>3</sup>/<sub>16</sub></p>
</td>
<td width="78">
<p>6</p>
</td>
<td width="72">
<p>9 <sup>1</sup>/<sub>4</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>4.5</p>
</td>
<td width="72">
<p>8 <sup>3</sup>/<sub>8</sub></p>
</td>
<td width="78">
<p>6.5</p>
</td>
<td width="72">
<p>9 <sup>1</sup>/<sub>2</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>5</p>
</td>
<td width="72">
<p>8 <sup>1</sup>/<sub>2</sub></p>
</td>
<td width="78">
<p>7</p>
</td>
<td width="72">
<p>9 <sup>5</sup>/<sub>8</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>5.5</p>
</td>
<td width="72">
<p>8 <sup>3</sup>/<sub>4</sub></p>
</td>
<td width="78">
<p>7.5</p>
</td>
<td width="72">
<p>9 <sup>3</sup>/<sub>4</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>6</p>
</td>
<td width="72">
<p>8 <sup>7</sup>/<sub>8</sub></p>
</td>
<td width="78">
<p>8</p>
</td>
<td width="72">
<p>9 <sup>15</sup>/<sub>16</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>6.5</p>
</td>
<td width="72">
<p>9 <sup>1</sup>/<sub>16</sub></p>
</td>
<td width="78">
<p>8.5</p>
</td>
<td width="72">
<p>10 <sup>1</sup>/<sub>8</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>7</p>
</td>
<td width="72">
<p>9 <sup>1</sup>/<sub>4</sub></p>
</td>
<td width="78">
<p>9</p>
</td>
<td width="72">
<p>10 <sup>1</sup>/<sub>4</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>7.5</p>
</td>
<td width="72">
<p>9 <sup>3</sup>/<sub>8</sub></p>
</td>
<td width="78">
<p>9.5</p>
</td>
<td width="72">
<p>10 <sup>7</sup>/<sub>16</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>8</p>
</td>
<td width="72">
<p>9 <sup>1</sup>/<sub>2</sub></p>
</td>
<td width="78">
<p>10</p>
</td>
<td width="72">
<p>10 <sup>9</sup>/<sub>16</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>8.5</p>
</td>
<td width="72">
<p>9 <sup>11</sup>/<sub>16</sub></p>
</td>
<td width="78">
<p>10.5</p>
</td>
<td width="72">
<p>10 <sup>3</sup>/<sub>4</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>9</p>
</td>
<td width="72">
<p>9 <sup>7</sup>/<sub>8</sub></p>
</td>
<td width="78">
<p>11</p>
</td>
<td width="72">
<p>10 <sup>15</sup>/<sub>16</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>9.5</p>
</td>
<td width="72">
<p>10</p>
</td>
<td width="78">
<p>11.5</p>
</td>
<td width="72">
<p>11 1/8</p>
</td>
</tr>
<tr>
<td width="85">
<p>10</p>
</td>
<td width="72">
<p>10 <sup>3</sup>/<sub>16</sub></p>
</td>
<td width="78">
<p>12</p>
</td>
<td width="72">
<p>11 1/4</p>
</td>
</tr>
<tr>
<td width="85">
<p>10.5</p>
</td>
<td width="72">
<p>10 <sup>5</sup>/<sub>16</sub></p>
</td>
<td width="78">
<p>12.5</p>
</td>
<td width="72">
<p>11 <sup>7</sup>/<sub>16</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>11</p>
</td>
<td width="72">
<p>10 <sup>1</sup>/<sub>2</sub></p>
</td>
<td width="78">
<p>13</p>
</td>
<td width="72">
<p>11 <sup>9</sup>/<sub>16</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>11.5</p>
</td>
<td width="72">
<p>10 <sup>11</sup>/<sub>16</sub></p>
</td>
<td width="78">
<p>13.5</p>
</td>
<td width="72">
<p>11 <sup>3</sup>/<sub>4</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>12</p>
</td>
<td width="72">
<p>10 <sup>7</sup>/<sub>8</sub></p>
</td>
<td width="78">
<p>14</p>
</td>
<td width="72">
<p>11 <sup>7</sup>/<sub>8</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>12.5</p>
</td>
<td width="72">
<p>11 <sup>1</sup>/<sub>16</sub></p>
</td>
<td width="78">
<p>14.5</p>
</td>
<td width="72">
<p>12 <sup>1</sup>/<sub>16</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>13</p>
</td>
<td width="72">
<p>11 <sup>1</sup>/<sub>4</sub></p>
</td>
<td width="78">
<p>15</p>
</td>
<td width="72">
<p>12 <sup>3</sup>/<sub>16</sub></p>
</td>
</tr>
<tr>
<td width="85">
<p>13.5</p>
</td>
<td width="72">
<p>11 <sup>3</sup>/<sub>8</sub></p>
</td>
<td width="78">
<p>15.5</p>
</td>
<td width="72">
<p>12 <sup>7</sup>/<sub>16</sub></p>
</td>
</tr>
</table>
</body>
</html>