Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Show tab when enter div and change underline color

I have this output now:
User generated imageHow can I make it that when this div appears the "details" tab is always open and like how it is in the second picture below
User generated imageAlso for the active tab to have a different color border.
My css:
.tabs {
  list-style:none;
  padding: 0;
}
.tabs:after {
  content: " ";
  display: table;
  clear: both;
}
.tabs li a {
 color: #333;
padding-bottom:0.5em;
border-bottom: 2px solid #d7d6d0;
font-size: 0.8em;
}
.tabs li a:active {
border-bottom: 2px solid #cf5630;
}
.tabs li {
float:left;
  margin-left: 15px;
  margin-right: 15px;
}
.tab1 {
  display: none;
}
.tab1.active {
  display: block;
}

Open in new window


code:
<span class="block textCenter tabs flex justifyBetween">
<ul class="tabs">
  <li class="uppercase pointer"><a href="#details">details</a></li>
  <li class="uppercase pointer"><a href="#ingredients">ingredients</a></li>
  <li class="uppercase pointer"><a href="#nutrition">nutrition</a></li>
  <li class="uppercase pointer"><a href="#instructions">instructions</a></li>
</ul>
</span>
<div id="tabContent" class="relative">
<span class="shadow block absolute"></span>
<span class="contentBox block">
<div class="tab1" id="details">
<p class="textLeft details">
fdhghjghj
</p>
</div>
<div class="tab1 " id="ingredients">
  Ingredients tab
</div>
<div class="tab1" id="nutrition">
  Nutrition tab
</div>
<div class="tab1" id="instructions">
  Instructions tab
</div>

Open in new window

Avatar of Ishaan Rawat
Ishaan Rawat
Flag of India image

[code].tabs li a.active { border-bottom: 2px solid #cf5630; }[/code]

try this
Avatar of Jazzy 1012
Jazzy 1012

ASKER

it didnt work
ASKER CERTIFIED SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial