CODEWITHSUNDEEP
jquery
Alexander Hein
Alexander Hein

Reputation: 990

jQuery: How to add a class to multiple elements with the same name?

I have build a little tab navigation and I want to open multiple elements each time I hover a tab.

Right now I'm connecting data-tab="tab1" with the id="tab1".

As I want to open multiple tab-content, I think I'm not driving good with the IDs anymore.

What do I have to add to the script to add the class active to multiple tab-content side by side?

Please take a look at the script below.

$(document).ready(function() {

  $('.product-spec').each(function() {
    var self = $(this); 
    self.find('.material--switch li').hover(function() {
      var tab_id = $(this).attr('data-tab');
      self.find('.active').removeClass('active');
      $(this).addClass('active');
      $('#' + tab_id).addClass('active');
    });
  });

});
.material--switch{
  list-style: none;
  display: inline-block;
  margin-bottom: 20px;
}

.material--switch li{
  border-right: 1px solid #f0f0f0;
  line-height: 45px;
  text-align: center;
  border-right: 0;
  color: #6f1132;
  display: inline-block;
  margin-right: -4px;
  background: #f2f4f6;
  box-shadow: #ced2db 0 1px 2px 0;
  cursor: pointer;
}
  
.material--switch li a {
  font-weight: 500;
  padding: 0 25px;
  display: block;
  color: #666;
  text-decoration: none;
}

.material--switch li.active{
  border-color: #039BE5 !important;
  background: #039BE5;
}


.material--switch li:first-child {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 3px;
}

.material--switch li:last-child {
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 0;
}

.tab-content{
  display: none;
}

.tab-content.active{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="product-spec">

<ul class="material--switch">
<li data-tab="tab1" class="active">TAB 1</li>
<li data-tab="tab2">TAB 2</li>
<li data-tab="tab3">TAB 3</li>
</ul>

  
  
<div id="tab1" class="tab-content active">
Tab 1 active
</div>

<div id="tab2" class="tab-content">
Tab 2 active  
</div>

<div id="tab3" class="tab-content">
Tab 3 active
</div>
  

  
<div id="tab1" class="tab-content active">
Tab 1 active
</div>

<div id="tab2" class="tab-content">
Tab 2 active  
</div>

<div id="tab3" class="tab-content">
Tab 3 active
</div> 
  
</div>

Upvotes: 0

Views: 326

Answers (1)

sgtdck
sgtdck

Reputation: 1047

I would suggest using classes instead of IDs, and adding a data-triggers-contents=".tab1, .tab2, .tab3"

Just ensure your data-triggers-contents contains a valid jQuery selector.

That way you can use

var tab_classes = $(this).attr('data-triggers-content');

// ...

$(tab_classes).addClass('active');

The tab HTML would look like <div class="tab1 tab-content">Tab 1 active</div>

Upvotes: 1

Related Questions