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...)
Script (i think) Error
in JavaScript
Posted
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>