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

asked on

Allow tab to be displayed without being clicked and active color border changed

I have this  output here:
User generated image
As you can see I want that when any tab is clicked on for the underline of it to be colored. "example when it is active"
I tried a.active but it didnt work
Also I want when I click the div for the "details section" to be already displayed.
Therefore for the outcome to look something like this:
User generated image
This is 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


My normal 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


My javascript:
$(function() {
  $('.tabs a').click(function(e) {
    e.preventDefault();
    let target = $(this).attr('href');
    $('.tab1.active').removeClass('active');
    $(target).addClass('active');
  });
});

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece 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
SOLUTION
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