Jump to content

RinaB

Members
  • Posts

    1
  • Joined

  • Last visited

RinaB's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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>
×
×
  • Create New...