CODEWITHSUNDEEP
javascript
sina
sina

Reputation: 201

toggle class Does not work

I have some span like this: 

<span class="read_more"> Read More </span>

and some div like this: 

<div class="tab_inner">
    .
    .
    .
    .
</div>

How can I toggle a class (active) for them

This is my code:

var showTab = document.getElementsByClassName("read_more");
var tabContent = document.getElementsByClassName("tab_inner");

function showTabContent(event) {
    for (var i = 0; i < showTab.length; i++) {
        showTab[i].addEventListener('click', function() {
            tabContent.toggle('active');
        });
    }
}

And that I can't get DOM with document.getElementsByClassName or document.getElementsByTagName in a function. just document.getElementById working in function.

what should I do?

Upvotes: 1

Views: 129

Answers (2)

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

You can call the method toggle() of the Element.classList, that is a read-only property which returns a live DOMTokenList collection of the class attributes of the element.

Code:

var showTab = document.getElementsByClassName('read_more'),
    tabContent = document.getElementsByClassName('tab_inner');

Array.prototype.forEach.call(showTab, function(elem, index) {
  elem.addEventListener('click', function() {
    tabContent[index].classList.toggle('active'); 
  });
});
.read_more {
    cursor: pointer;
}
.tab_inner.active {
  color: red;
}
<span class="read_more">Read More</span>
<div class="tab_inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, dignissimos.</p>
</div>

<span class="read_more">Read More</span>
<div class="tab_inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quam dolor quae error eligendi numquam ipsum. Assumenda modi, explicabo.</p>
</div>

Note also that you can iterate over the array-like HTMLCollection by calling Array's forEach() method.

Upvotes: 1

Pete
Pete

Reputation: 58432

You can only run toggle on a classList which is on a single element. I have amended your code below

var showTab = document.getElementsByClassName("read_more");
var tabContent = document.getElementsByClassName("tab_inner");

function showTabContent() {
  for (var i = 0; i < showTab.length; i++) {
    (function(index) {
      showTab[i].addEventListener('click', function() {
        tabContent[index].classList.toggle('active'); // I have assumed each read more has a corresponding tab content
      });
    })(i);
  }
}

showTabContent();
.tab_inner.active {
  color: red;
}
<div class="read_more">read more</div>
<div class="tab_inner">tab content</div>
<div class="read_more">read more</div>
<div class="tab_inner">tab content</div>

Upvotes: 2

Related Questions