Menu icon Foundation
Accordion Tabs

I'm using the Accordion tabs content in my site. The tab part works fine but when it converts to the accordion on small screen, all the panels open under the accordion links and not in between like an accordion should.

I am trying to rebuild the home page for this site to use the new tab-accordion instead of hide/show the separate tabs and accordion like I am doing here: https://www.celebritystaff.com/

 

Here is the code for the new home page using just the accordion-tabs code:

 

 <!-----------------------------TABACCORDION------------------------------>

<div class="tabs-content" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
 
  <div class="tabs-panel is-active" id="panel1">
    <div class="medium-2 columns">
  
    <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
    
      <li class="tabs-title is-active tabOnebkgd btn1" style="text-align:left"><a href="#panel1v" aria-selected="true" class="TabText">FIND A JOB</a></li>
                    
      <li class="tabs-title tabTwoBkgd btn2"><a href="#panel2v" class="TabText" style="text-align:left">FIND TALENT</a></li>
    
      <li class="tabs-title tabThreeBkgd btn3"><a href="#panel3v" class="TabText" style="text-align:left">FOR EMPLOYEES</a></li>
  
    </ul>
 
  </div>



<div class="medium-10 columns">
   
   
   
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
    
<div class="tabs-panel is-active" id="panel1v">
 
 <div class="hide-for-small medium-5 large-5 columns">    
      <ul class="vertical dropdown menu kickOutMenu hide-for-small-only" data-dropdown-menu style="max-width:220px !important; text-align:left;">
                     <li><a href="../why-work-with-celebrity.aspx" class="kickOutLinks">WHY WORK WITH CELEBRITY</a></li>
                      <li><a href="../areas-of-specialization-employee.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
                    <li><a href="../career-options.aspx" class="kickOutLinks">CAREEER OPTIONS</a></li>
                    <li><a href="../our-process-employee.aspx" class="kickOutLinks">OUR PROCESS</a></li>
                    <li><a href="../benefits.aspx" class="kickOutLinks">BENEFITS</a></li>
                    <li><a href="../candidate-newsletter.aspx" class="kickOutLinks">OUTSTANDING OPPORTUNITIES NEWSLETTER</a></li>
                    </ul>                    
 </div>

             <!-- Find A Job Form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<p class="RedHeader" align="center">Find Jobs</p>
      <div id="Formcontent_main" class="BodyCopy" >
                <!-- start job search -->
<div id="jobsearchdiv" style="display: none;">
    <input type="text" id="txtQuery" placeholder="Job Title or Keyword" />
    <input type="text" id="txtLocation" placeholder="City, State or Zipcode" />
    <button type="button" class="button" onclick="jobSearch()">SEARCH</button>
    <label id="errorControl" name="errorControl"></label>
</div>
<div id="jobsearchnotfound" style="display: none; color: inherit; text-align: center;">
    Oops! Something went wrong.
    <br />
    Job Search is currently unavailable.<br /><br />
</div>
<!-- end job search -->
                  </div>
                  </div>
        </div>
</div>
<!-- end of Find A Job form -->


<!---------------------RED Icons---------------------------->                   
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns" style="margin-top:120px;">
  <div class="hide-for-small medium-2 large-2 columns float-right"><a href="/Apply-Online.aspx" target="_blank"><img src="../img/design/images/aol-red.png" alt="Apply Online" class="show-for-large-up"></a>
  </div>
  <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../job-search-tips.aspx"><img src="../img/design/images/jst-red.png" alt="Job Search Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../interview-tips.aspx"><img src="../img/design/images/interview-red.png" alt="Interview Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../resume-recommendations.aspx"><img src="../img/design/images/resume-red.png" alt="Resume Recommendations" class="show-for-large-up"></a>
 </div>
</div>
</div>                    
 <!---------------------RED Icons---------------------------->
</div>
 
 
 
 
 
  <div class="tabs-panel" id="panel2v">
     <div class="hide-for-small medium-5 large-5 columns"> 
       <ul class="vertical dropdown menu kickOutMenu2 hide-for-small-only" data-dropdown-menu style="max-width: 350px; text-align:left;">
                     <li><a href="../why-partner-with-celebrity.aspx" class="kickOutLinks">WHY PARTNER WITH CELEBRITY</a></li>
                      <li><a href="../areas-of-specialization-client.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
                    <li><a href="../staffing-solutions.aspx" class="kickOutLinks">STAFFING SOLUTIONS</a></li>
                    <li><a href="../our-process-client.aspx" class="kickOutLinks">OUR PROCESS</a></li>
                    <li><a href="../request-talent.aspx" class="kickOutLinks">REQUEST TALENT</a></li>
                    <li><a href="../online-timecard-approval.aspx" class="kickOutLinks">ONLINE TIMECARD APPROVAL</a></li>
                    <li><a href="../client-newsletter.aspx" class="kickOutLinks">TOP TALENT NEWSLETTER</a></li>
                    </ul> 
                   
  </div>
 
 
   <!-- Find Talent Form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">                
      <div class="Form1">
      <div class="OrangeHeader" id="FindTalent" style="padding-bottom:5px;">Find Talent</div>
     <p class="FormText"><strong>Have a need for an employee?</strong> Search our network of exceptional candidates or contact us to learn about additional candidates not featured online.</p>
   <div id="staffSearch">

<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"/>
<p>
<Aureus:CandidateSearchBox runat="server" ID="candidateSearchBox1" ButtonText="BEGIN STAFF SEARCH" CssClass="Search ButtonOrange" RedirectUrl="~/Employers/Results.aspx?wb={0}&pos={1}" IsInitializeWithDivision="true" />
</p>
<p class="FormText">Or, <a href="/request-talent.aspx" class="redBodyLink">submit your staffing request online</a> and one of our professionals will start working on your search right away.</p>

</div>
</div>
</div>
</div>
       
        <!-- end of Find Talent Form -->
                     
                   
<!---------------------Orange Icons---------------------------->                   
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-35px;">
   <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employment-trends.aspx"><img src="../img/design/images/et-orange.png" alt="Employment Trends" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../interview-tips-client.aspx"><img src="../img/design/images/it-orange.png" alt="Interview Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../professional-affiliations.aspx"><img src="../img/design/images/pa-orange.png" alt="Professional Affiliations" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../our-clients-say-it-best.aspx"><img src="../img/design/images/ocsib-orange.png" alt="Our Clients Say It Best" class="show-for-large-up"></a>
 </div>


          </div>
                    </div>  
                   
 <!---------------------orange Icons---------------------------->             
  </div>
 
 
 
 
 
 
  <div class="tabs-panel" id="panel3v">
    <div class="hide-for-small medium-5 large-5 columns"> 
        <ul class="vertical dropdown menu kickOutMenu3 hide-for-small-only" data-dropdown-menu style="max-width: 450px; text-align:left">
                     <li><a href="../starting-your-assignment.aspx" class="kickOutLinks">STARTING YOUR ASSIGNMENT</a></li>
                      <li><a href="../pay-benefits.aspx" class="kickOutLinks">PAY & BENEFITS</a></li>
                    <li><a href="../online-timecard-submittal.aspx" class="kickOutLinks">ONLINE TIMECARD SUBMITTAL</a></li>
                    <li><a href="../employee-handbook.aspx" class="kickOutLinks">EMPLOYEE HANDBOOK</a></li>
                     <li><a href="../I-9.aspx" class="kickOutLinks">COMPLETING YOUR I-9</a></li>
                    </ul> 
      </div>             
<!-- Login form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<div class="PurpleHeader" style="padding-bottom:5px;">Employee Login</div>
<p class="FormText"><strong>Current employee?</strong> Log in to access the employee portal to access pay &amp; benefits information or view the employee handbook.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny" >LOGIN</button>
</p>
<p class="FormText">Forgot your User ID and/or Password? <a href="/Login.aspx" target="_blank" class="redBodyLink">Click here</a></p>
<hr />
<p class="FormText">Not an employee? Register today and one of our professionals will contact you regarding career opportunities.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny">NEW USER REGISTRATION</button>
</p>
</div>
</div>
<!-- end of Login form -->
                     
                   
<!---------------------Purple Icons---------------------------->                   
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-115px; z-index:1000;">
 
   <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div>
 
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../in-the-community.aspx"><img src="../img/design/images/itc-purple.png" alt="In The Community" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../safety-tip.aspx"><img src="../img/design/images/st-purple.png" alt="Safety Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employee-of-the-quarter.aspx"><img src="../img/design/images/eoq-purple.png" alt="Employee Of The Quarter" class="show-for-large-up"></a>
 </div>

</div>
</div>  
                   
 <!---------------------Purple Icons---------------------------->                    
</div> 
</div>


</div><!----------Tabs-content verticle----------------->
</div><!--------medium-10 columns---------------------->
</div><!---------Tabs-content---------------------------->
</div>
<!--------------------------TABACCORDION------------------------------------->

<div><ul><li>

I'm using the Accordion tabs content in my site. The tab part works fine but when it converts to the accordion on small screen, all the panels open under the accordion links and not in between like an accordion should.

I am trying to rebuild the home page for this site to use the new tab-accordion instead of hide/show the separate tabs and accordion like I am doing here: https://www.celebritystaff.com/

 

Here is the code for the new home page using just the accordion-tabs code:

 

 <!-----------------------------TABACCORDION------------------------------>

<div class="tabs-content" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
 
  <div class="tabs-panel is-active" id="panel1">
    <div class="medium-2 columns">
  
    <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
    
      <li class="tabs-title is-active tabOnebkgd btn1" style="text-align:left"><a href="#panel1v" aria-selected="true" class="TabText">FIND A JOB</a></li>
                    
      <li class="tabs-title tabTwoBkgd btn2"><a href="#panel2v" class="TabText" style="text-align:left">FIND TALENT</a></li>
    
      <li class="tabs-title tabThreeBkgd btn3"><a href="#panel3v" class="TabText" style="text-align:left">FOR EMPLOYEES</a></li>
  
    </ul>
 
  </div>



<div class="medium-10 columns">
   
   
   
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
    
<div class="tabs-panel is-active" id="panel1v">
 
 <div class="hide-for-small medium-5 large-5 columns">    
      <ul class="vertical dropdown menu kickOutMenu hide-for-small-only" data-dropdown-menu style="max-width:220px !important; text-align:left;">
                     <li><a href="../why-work-with-celebrity.aspx" class="kickOutLinks">WHY WORK WITH CELEBRITY</a></li>
                      <li><a href="../areas-of-specialization-employee.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
                    <li><a href="../career-options.aspx" class="kickOutLinks">CAREEER OPTIONS</a></li>
                    <li><a href="../our-process-employee.aspx" class="kickOutLinks">OUR PROCESS</a></li>
                    <li><a href="../benefits.aspx" class="kickOutLinks">BENEFITS</a></li>
                    <li><a href="../candidate-newsletter.aspx" class="kickOutLinks">OUTSTANDING OPPORTUNITIES NEWSLETTER</a></li>
                    </ul>                    
 </div>

             <!-- Find A Job Form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<p class="RedHeader" align="center">Find Jobs</p>
      <div id="Formcontent_main" class="BodyCopy" >
                <!-- start job search -->
<div id="jobsearchdiv" style="display: none;">
    <input type="text" id="txtQuery" placeholder="Job Title or Keyword" />
    <input type="text" id="txtLocation" placeholder="City, State or Zipcode" />
    <button type="button" class="button" onclick="jobSearch()">SEARCH</button>
    <label id="errorControl" name="errorControl"></label>
</div>
<div id="jobsearchnotfound" style="display: none; color: inherit; text-align: center;">
    Oops! Something went wrong.
    <br />
    Job Search is currently unavailable.<br /><br />
</div>
<!-- end job search -->
                  </div>
                  </div>
        </div>
</div>
<!-- end of Find A Job form -->


<!---------------------RED Icons---------------------------->                   
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns" style="margin-top:120px;">
  <div class="hide-for-small medium-2 large-2 columns float-right"><a href="/Apply-Online.aspx" target="_blank"><img src="../img/design/images/aol-red.png" alt="Apply Online" class="show-for-large-up"></a>
  </div>
  <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../job-search-tips.aspx"><img src="../img/design/images/jst-red.png" alt="Job Search Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../interview-tips.aspx"><img src="../img/design/images/interview-red.png" alt="Interview Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../resume-recommendations.aspx"><img src="../img/design/images/resume-red.png" alt="Resume Recommendations" class="show-for-large-up"></a>
 </div>
</div>
</div>                    
 <!---------------------RED Icons---------------------------->
</div>
 
 
 
 
 
  <div class="tabs-panel" id="panel2v">
     <div class="hide-for-small medium-5 large-5 columns"> 
       <ul class="vertical dropdown menu kickOutMenu2 hide-for-small-only" data-dropdown-menu style="max-width: 350px; text-align:left;">
                     <li><a href="../why-partner-with-celebrity.aspx" class="kickOutLinks">WHY PARTNER WITH CELEBRITY</a></li>
                      <li><a href="../areas-of-specialization-client.aspx" class="kickOutLinks">AREAS OF SPECIALIZATION</a></li>
                    <li><a href="../staffing-solutions.aspx" class="kickOutLinks">STAFFING SOLUTIONS</a></li>
                    <li><a href="../our-process-client.aspx" class="kickOutLinks">OUR PROCESS</a></li>
                    <li><a href="../request-talent.aspx" class="kickOutLinks">REQUEST TALENT</a></li>
                    <li><a href="../online-timecard-approval.aspx" class="kickOutLinks">ONLINE TIMECARD APPROVAL</a></li>
                    <li><a href="../client-newsletter.aspx" class="kickOutLinks">TOP TALENT NEWSLETTER</a></li>
                    </ul> 
                   
  </div>
 
 
   <!-- Find Talent Form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">                
      <div class="Form1">
      <div class="OrangeHeader" id="FindTalent" style="padding-bottom:5px;">Find Talent</div>
     <p class="FormText"><strong>Have a need for an employee?</strong> Search our network of exceptional candidates or contact us to learn about additional candidates not featured online.</p>
   <div id="staffSearch">

<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"/>
<p>
<Aureus:CandidateSearchBox runat="server" ID="candidateSearchBox1" ButtonText="BEGIN STAFF SEARCH" CssClass="Search ButtonOrange" RedirectUrl="~/Employers/Results.aspx?wb={0}&pos={1}" IsInitializeWithDivision="true" />
</p>
<p class="FormText">Or, <a href="/request-talent.aspx" class="redBodyLink">submit your staffing request online</a> and one of our professionals will start working on your search right away.</p>

</div>
</div>
</div>
</div>
       
        <!-- end of Find Talent Form -->
                     
                   
<!---------------------Orange Icons---------------------------->                   
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-35px;">
   <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employment-trends.aspx"><img src="../img/design/images/et-orange.png" alt="Employment Trends" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../interview-tips-client.aspx"><img src="../img/design/images/it-orange.png" alt="Interview Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../professional-affiliations.aspx"><img src="../img/design/images/pa-orange.png" alt="Professional Affiliations" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../our-clients-say-it-best.aspx"><img src="../img/design/images/ocsib-orange.png" alt="Our Clients Say It Best" class="show-for-large-up"></a>
 </div>


          </div>
                    </div>  
                   
 <!---------------------orange Icons---------------------------->             
  </div>
 
 
 
 
 
 
  <div class="tabs-panel" id="panel3v">
    <div class="hide-for-small medium-5 large-5 columns"> 
        <ul class="vertical dropdown menu kickOutMenu3 hide-for-small-only" data-dropdown-menu style="max-width: 450px; text-align:left">
                     <li><a href="../starting-your-assignment.aspx" class="kickOutLinks">STARTING YOUR ASSIGNMENT</a></li>
                      <li><a href="../pay-benefits.aspx" class="kickOutLinks">PAY & BENEFITS</a></li>
                    <li><a href="../online-timecard-submittal.aspx" class="kickOutLinks">ONLINE TIMECARD SUBMITTAL</a></li>
                    <li><a href="../employee-handbook.aspx" class="kickOutLinks">EMPLOYEE HANDBOOK</a></li>
                     <li><a href="../I-9.aspx" class="kickOutLinks">COMPLETING YOUR I-9</a></li>
                    </ul> 
      </div>             
<!-- Login form -->
<div class="row">
<div class="small-12 medium-5 large-5 columns">
<div class="Form1">
<div class="PurpleHeader" style="padding-bottom:5px;">Employee Login</div>
<p class="FormText"><strong>Current employee?</strong> Log in to access the employee portal to access pay &amp; benefits information or view the employee handbook.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny" >LOGIN</button>
</p>
<p class="FormText">Forgot your User ID and/or Password? <a href="/Login.aspx" target="_blank" class="redBodyLink">Click here</a></p>
<hr />
<p class="FormText">Not an employee? Register today and one of our professionals will contact you regarding career opportunities.</p>
<p>
<button onclick="window.open('/Login.aspx');" class="ButtonPurple tiny">NEW USER REGISTRATION</button>
</p>
</div>
</div>
<!-- end of Login form -->
                     
                   
<!---------------------Purple Icons---------------------------->                   
<div class="row">
<div class="hide-for-small-only medium-12 large-12 columns float-right" style="margin-top:-115px; z-index:1000;">
 
   <div class="hide-for-small medium-2 large-2 columns float-right"><a href="../Videos/Videos.aspx"><img src="../img/button-icons-hp.png" alt="Videos" class="show-for-large-up"></a>
 </div>
 
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../in-the-community.aspx"><img src="../img/design/images/itc-purple.png" alt="In The Community" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../safety-tip.aspx"><img src="../img/design/images/st-purple.png" alt="Safety Tips" class="show-for-large-up"></a>
 </div>
 <div class="hide-for-small medium-2 large-2 columns float-right"> <a href="../employee-of-the-quarter.aspx"><img src="../img/design/images/eoq-purple.png" alt="Employee Of The Quarter" class="show-for-large-up"></a>
 </div>

</div>
</div>  
                   
 <!---------------------Purple Icons---------------------------->                    
</div> 
</div>


</div><!----------Tabs-content verticle----------------->
</div><!--------medium-10 columns---------------------->
</div><!---------Tabs-content---------------------------->
</div>
<!--------------------------TABACCORDION------------------------------------->