Menu icon Foundation
How do I toggle z-index of tabs?

Tabs

<ul class="tabs" data-tab data-options="deep_linking: true" scroll_to_content:"false">
    <li class="tab-title title1"><a href="#panel2-1">Tab 1</a></li>
    <li class="tab-title title2"><a href="#panel2-2">Tab 2</a></li> 
    <li class="tab-title title3"><a href="#panel2-3">Tab 3</a></li>
</ul>          

 <div class="tabs-content"> 
    <div class="content active" id="panel2-1">
----stuff in this tab------</div>


<div class="content" id="panel2-2">
----stuff in this tab------</div>

<div class="content" id="panel2-3">
 ----stuff in this tab------</div>

div#all_tabs .tabs a{
min-width: 198px;
text-align: center;
border-radius: 4px 4px 0 0;
box-shadow:9px 0px 0px 0px #000000;
position: relative;

}

.tab-title.active{
  z-index: 98;
  position: relative;
}
.tab-title1{
  z-index: 1;
  position: relative;
}

.title2{
  z-index: 5;
  position: relative;
}

.title3{
  z-index: 3;
  position: relative;
}

div#all_tabs .tabs-content{
background-color: #fff;
border-radius: 4px 4px 0 0;
max-width: 952px;
min-height: 883px;
padding-top: 50px;
box-shadow:9px 0px 0px 0px #000000;
}
            

         

Hey I asked this question over on StackO but it's sitting over there unanswered so I thought I would give it a try here since I'm using foundation to make my site.

I want to re-arrange the z-index of my tabs based upon which tab is clicked like my image so the shadow doesn't get lost. I don't know if this can be accomplished with CSS alone or if I need some JS.

Here is a jsfiddle too - http://jsfiddle.net/edohqw5j/8/

Would really appreciate any help! Thanks!

tabsz-indexshadows

Tabs

<ul class="tabs" data-tab data-options="deep_linking: true" scroll_to_content:"false">
    <li class="tab-title title1"><a href="#panel2-1">Tab 1</a></li>
    <li class="tab-title title2"><a href="#panel2-2">Tab 2</a></li> 
    <li class="tab-title title3"><a href="#panel2-3">Tab 3</a></li>
</ul>          

 <div class="tabs-content"> 
    <div class="content active" id="panel2-1">
----stuff in this tab------</div>


<div class="content" id="panel2-2">
----stuff in this tab------</div>

<div class="content" id="panel2-3">
 ----stuff in this tab------</div>

div#all_tabs .tabs a{
min-width: 198px;
text-align: center;
border-radius: 4px 4px 0 0;
box-shadow:9px 0px 0px 0px #000000;
position: relative;

}

.tab-title.active{
  z-index: 98;
  position: relative;
}
.tab-title1{
  z-index: 1;
  position: relative;
}

.title2{
  z-index: 5;
  position: relative;
}

.title3{
  z-index: 3;
  position: relative;
}

div#all_tabs .tabs-content{
background-color: #fff;
border-radius: 4px 4px 0 0;
max-width: 952px;
min-height: 883px;
padding-top: 50px;
box-shadow:9px 0px 0px 0px #000000;
}
            

         

Hey I asked this question over on StackO but it's sitting over there unanswered so I thought I would give it a try here since I'm using foundation to make my site.

I want to re-arrange the z-index of my tabs based upon which tab is clicked like my image so the shadow doesn't get lost. I don't know if this can be accomplished with CSS alone or if I need some JS.

Here is a jsfiddle too - http://jsfiddle.net/edohqw5j/8/

Would really appreciate any help! Thanks!