Menu icon Foundation
Responsive Accordion VERTICAL Tabs?

Hello, I really love the Responsive Accordion Tab component. I'm aware that the TAB component has a VERTICAL option. I'm looking for a way to make the Responsive Accordion Tab component change from an accordion at small screens, and change to VERTICAL TABS on large screens. Is this possible, and how would I accomplish this?

 

Update 3/20/18: Any response from Zurb or the community?

responsive accordion tabResponsiveaccordiontabvertical tabs

Hello, I really love the Responsive Accordion Tab component. I'm aware that the TAB component has a VERTICAL option. I'm looking for a way to make the Responsive Accordion Tab component change from an accordion at small screens, and change to VERTICAL TABS on large screens. Is this possible, and how would I accomplish this?

 

Update 3/20/18: Any response from Zurb or the community?

Pam Bifaro 5 months ago

I am looking for this same answer I have a question posted with code but no reply.

 

 

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

 

<div class="tabs" 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------------------------------------->

 

 

PasCher 5 months ago

I am looking for an answer for a similar problem