CODEWITHSUNDEEP
jquerytwitter-bootstrap
Mae
Mae

Reputation: 433

Add ID to child of DIV with .active class, and remove ID to any inactive

How can I add an ID to the child of a DIV that has the class .active and also remove the ID if found elsewhere.

I would like to assign the ID "target" to the class "template1" (or WHEN active to "template2") when the DIV with the class "tab-pane" has the class "active" too. And when I click on the other tab it should check if "target" is assigned elsewhere to remove it.

Here is a fiddle: https://jsfiddle.net/7c8aek90/

HTML

<div id="Tabbie">
  <ul class="nav nav-tabs" id="styleTab">
    <li class="active">
      <a data-toggle="tab" href="#1">Tab 1</a>
    </li>
    <li>
      <a data-toggle="tab" href="#2">Tab 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="1">
      <div class="row">
        <div class="col-md-6 templateContent">
          <div class="template1">
            Text
          </div>
        </div>
        <div class="col-md-6 textContent">
          Text
        </div>
      </div>
    </div>
    <div class="tab-pane" id="2">
      <div class="row">
        <div class="col-md-6 templateContent">
          <div class="template2">
            Text
          </div>
        </div>
        <div class="col-md-6 textContent">
          Text
        </div>
      </div>
    </div>
  </div>
</div>

My jQuery so far

if ($("div.tab-pane").hasClass('active')) {
  $("div.tab-pane").find("div:eq(2)").attr('id', 'target');
} else {
  $("div.tab-pane").find("div:eq(2)").removeAttr('id', 'target');
}

Thanks!

Upvotes: 0

Views: 540

Answers (1)

Ranjeet Singh
Ranjeet Singh

Reputation: 924

The idea is add a dummy class to each which you want to add attribute id="target". Check this fiddle

Visit [Fiddle] (https://jsfiddle.net/s0e121hd/1/)!

Upvotes: 1

Related Questions