Jump to content

Script (i think) Error


RinaB
 Share

Recommended Posts

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...