CSS Arrow under Tabs on Active

Question

Removed A LOT of code that makes this work to only provide bare minimum.

I'm trying get a small arrow that would be centered under each box but only when the tab is in it's blue active state.

I got the arrow coded under the first tab. But how would I center this arrow and the make it display when the the tab is in it's blue active state?

(note the JS may not show the blue active state in this demo.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
   <script type="text/javascript">
$(function(){  

  //Make first one active
  $(".tabs>li").first().addClass("activeTab");

  $(".tabs>li").click(function(e){

    $(".activeTab").removeClass("activeTab");

    var _this = $(this);   
     _this.addClass("activeTab");
  });


})
  </script>  

.tabs_accordion {
  display: block;
  margin: 0 auto;
  max-width: 1200px;
}


.tabs_accordion > input {
  display: none;
}


.tabs_accordion ul.tabs {
  display: table;
  width: 100%;
  display: none;
  background-color: green;
  padding: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  color: #7EE8FF;
  font-size: 16px;
}
.tabs_accordion ul.tabs li {
  display: table-cell;
  cursor: pointer;
  width: 238px;
  
}

.tabs_accordion ul.tabs li label:active {
	  background-color: blue;
	
}

.tabs_accordion ul.tabs li label {
  display: block;
  height: 74px;
  padding: 20px;
  text-align: center;
  border-left: 2px solid yellow;
  margin: 0px 0;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: bold;
}
.tabs_accordion ul.tabs li label:focus {
  background-color: blue;
}
.tabs_accordion ul.tabs li label:active {
  background-color: blue;
}
.tabs_accordion ul.tabs li:hover {
  background-color: blue;
   color:#FFFFFF;
}

.tabs_accordion div.content > label {
  display: block;
  background-color: green;
  padding: 20px;
  margin-bottom: 1em;
  cursor: pointer;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  text-align:center;
}
.tabs_accordion div.content > div {
  display: none;
  padding: 10px; 

  margin-bottom: 1em;
}

  .tabs_accordion ul.tabs {
    display: table;
  }
  .tabs_accordion div.content > label {
    display: none;
  }
  .tabs_accordion div.content > div {
    margin-bottom: 0;
  }
  
  
  /* For Java */
  
  .activeTab
{  
   background-color: blue;
}
  
  /* ARROW Controls */

Controls Active 
.tabs_accordion [id^="tab"]:checked + label {
  background: blue;
  color: #fff;
}

 #tabarrow {
	width:0;
	height:0;
	top:74px;
	left:20px;
    border-color:blue transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

.tabs_accordion ul.tabs li:hover label {
  border-left-color: transparent;
}
.tabs_accordion ul.tabs li:hover + li > label {
  border-left-color: transparent;
}

	

<div class="tabs_accordion">
<input type="radio" name="tabs" value="tab_1" id="tab_1_content_control" checked="checked" tabindex="0" />
<input type="radio" name="tabs" value="tab_2" id="tab_2_content_control" tabindex="0" />
<input type="radio" name="tabs" value="tab_3" id="tab_3_content_control" tabindex="0" /> 
 
  <ul class="tabs">
    <li><label for="tab_1_content_control">Option 1</label></li>
    <li><label for="tab_2_content_control">Option 2</label></li>
    <li><label for="tab_3_content_control">Option 3</label></li>
  </ul>
   <div id="tabarrow"></div>
  <div class="content">
    
    <label for="tab_1_content_control">Option 1</label>
    <label for="tab_2_content_control">Option 2</label>
    <label for="tab_3_content_control">Option 3</label>
    
  </div>
</div>

Answer 1

• Instead of separate element for arrow i have used :pseudo element for adding border and on :hover of label the background-color is changed and :pseudo element is visible
• Removed overflow:hidden from parent
• Centerd the arrow by positioning absolute left:50% and removing half the width of the arrow ie 20px with margin-left

Removed

//Make first one active
$(".tabs > li ").first().addClass("activeTab");

$(".tabs > li").click(function(e) {

  $(".activeTab ").removeClass("activeTab");

  var _this = $(this);
  _this.addClass("activeTab");
});

.tabs_accordion {
  display: block;
  margin: 0 auto;
  max-width: 1200px;
}
.tabs_accordion > input {
  display: none;
}
.tabs_accordion ul.tabs {
  display: table;
  width: 100%;
  display: none;
  background-color: green;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  color: #7EE8FF;
  font-size: 16px;
}
.tabs_accordion ul.tabs li {
  display: table-cell;
  cursor: pointer;
  width: 238px;
  position: relative;
}
.tabs_accordion ul.tabs li label:active {
  background-color: blue;
}
.tabs_accordion ul.tabs li label {
  display: block;
  height: 74px;
  padding: 20px;
  text-align: center;
  border-left: 2px solid yellow;
  margin: 0px 0;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: bold;
}
.tabs_accordion ul.tabs li label:focus {
  background-color: blue;
}
.tabs_accordion ul.tabs li label:active {
  background-color: blue;
}
.tabs_accordion ul.tabs li:hover {
  background-color: blue;
  color: #FFFFFF;
}
.tabs_accordion div.content > label {
  display: block;
  background-color: green;
  padding: 20px;
  margin-bottom: 1em;
  cursor: pointer;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}
.tabs_accordion div.content > div {
  display: none;
  padding: 10px;
  margin-bottom: 1em;
}
.tabs_accordion ul.tabs {
  display: table;
}
.tabs_accordion div.content > label {
  display: none;
}
.tabs_accordion div.content > div {
  margin-bottom: 0;
}
/* For Java */

/* ARROW Controls */

Controls Active .tabs_accordion [id^="tab"]:checked + label {
  background: blue;
  color: #fff;
}
.activeTab {
  background-color: blue;
}
.tabs_accordion ul.tabs li label:after {
  content: '';
  width: 0;
  height: 0;
  top: 74px;
  left: 50%;
  bottom: 0;
  margin-left: -20px;
  border-color: blue transparent transparent transparent;
  border-style: solid;
  position: absolute;
  border-width: 20px;
  display: none;
}
.tabs_accordion ul.tabs li:hover label:after,
.tabs_accordion ul.tabs li.activeTab label:after {
  display: block;
}
.tabs_accordion ul.tabs li:hover label {
  border-left-color: transparent;
}
.tabs_accordion ul.tabs li:hover + li > label {
  border-left-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="tabs_accordion">
  <input type="radio" name="tabs" value="tab_1" id="tab_1_content_control" checked="checked" tabindex="0" />
  <input type="radio" name="tabs" value="tab_2" id="tab_2_content_control" tabindex="0" />
  <input type="radio" name="tabs" value="tab_3" id="tab_3_content_control" tabindex="0" />

  <ul class="tabs">
    <li>
      <label for="tab_1_content_control">Option 1</label>
    </li>
    <li>
      <label for="tab_2_content_control">Option 2</label>
    </li>
    <li>
      <label for="tab_3_content_control">Option 3</label>
    </li>
  </ul>
  <div class="content">

    <label for="tab_1_content_control">Option 1</label>
    <label for="tab_2_content_control">Option 2</label>
    <label for="tab_3_content_control">Option 3</label>

  </div>
</div>

Answer 2

Check this code. You don't need to add extra div for arrow. Just make it simple.

<ul class="tabs">
<li><label for="tab_1_content_control">Option 1</label></li>
<li><label for="tab_2_content_control">Option 2</label></li>
<li><label for="tab_3_content_control">Option 3</label></li>
</ul>



ul.tabs li {
  display: table-cell;
  cursor: pointer;
  width: 238px;

}

ul.tabs li label {
  display: block;
  height: 74px;
  padding: 20px;
  text-align: center;
  border-left: 2px solid yellow;
  margin: 0px 0;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: bold;
      position: relative;
}

ul.tabs li label.active, ul.tabs li label:hover {
      background-color: blue;


}
ul.tabs li label:hover:after, ul.tabs li label.active:after{
    content:'';
    display:block;
    width: 0;
    height: 0;
    position:absolute;
    top: 100%;
    left: 50%;
    margin-left:-20px;
    border-color: blue transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
}








$(function(){  

  //Make first one active
  $(".tabs li label").first().addClass("active");

  $(".tabs li label").click(function(){
    $(".tabs li label").removeClass("active");
     $(this).addClass("active");
  });


})