CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user8608046
user8608046

Reputation:

How to target specific div and then toggle class?

For example, I have this menu:

function toggleHiddenContent(tabClass) {
    let t = document.querySelectorAll(tabClass);
    for(var i = 0; i<t.length; i++) {
        t[i].classList.toggle="visible-class";
    }
}
.hidden-content {
    display: none;
}
.visible-class {
    display: block
}
<div>
    <a class="main-holder" onClick="toggleHiddenContent('.main-holder')">Main one</a>
    <div class="hidden-content">Hidden content One</div>

    <a class="main-holder" onClick="toggleHiddenContent('.main-holder')">Main two</a>
    <div class="hidden-content">Hidden content two</div>
</div>

However, it toggles for all classes. I do understand what is the issue, but how would I match only the one that is clicked and not the ones that are not active (clicked)?

I need it in vanilla js

Thanks guys

Upvotes: 1

Views: 1696

Answers (3)

Barrosy
Barrosy

Reputation: 1457

You could try something like this (and also prevent obtrusive javascript):

//Get the element(s) you want to interact with and store these in an array:
let myElements = document.getElementsByClassName("main-holder");
//Loop through the array to add an event listener to every interactable element:
for (let i = 0; i < 10; i++) {
  if (myElements[i]) {
    myElements[i].addEventListener("click", function() {
      //Your function:
      toggleHiddenContent("visible-class", i);
    });
  }
}

function toggleHiddenContent(tabClass, target) {
  //Get the element(s) you want to manipulate (or adjust) and store these in an array:
  let targetElements = document.getElementsByClassName("hidden-content");
  //Use the index you got from clicking on the previous element to determine which targeted element to manipulate (or adjust):
  targetElements[target].classList.toggle(tabClass);
}
.hidden-content {
  display: none;
}

.visible-class {
  display: block;
}
<div>
  <a class="main-holder">Main one</a>
  <div class="hidden-content">Hidden content One</div>

  <a class="main-holder">Main two</a>
  <div class="hidden-content">Hidden content two</div>
</div>

JSFiddle

If you need any more information, please let me know in a comment.

Upvotes: 0

CapitanFindus
CapitanFindus

Reputation: 1526

classList.toggle is a function, not an assignable property

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

try this

function toggleHiddenContent(tabClass) {
  let t = document.querySelectorAll(tabClass);
  for (var i = 0; i < t.length; i++) {
    t[i].classList.toggle("visible-class");
  }
}

Based on your example I would suggest you a few little changes, which will improve readability, like setting a parent <div> (makes it easy to find parent), and removing onClick from HTML. check it out

fiddle

from the answer below, I didn't know about nextElementSibling, which won't need you to change your HTML like I've suggested

Upvotes: 3

Sami Ahmed Siddiqui
Sami Ahmed Siddiqui

Reputation: 2386

You may try this:

function toggleHiddenContent(e) {
    if (e.target.nextElementSibling.classList.contains("visible-class") ) {
        e.target.nextElementSibling.className = "hidden-content";
      
    } else {
        e.target.nextElementSibling.className = "visible-class";   
    }
}
.hidden-content {
    display: none;
}
.visible-class {
    display: block
}
<div>
    <a class="main-holder" onClick="toggleHiddenContent(event)">Main one</a>
    <div class="hidden-content">Hidden content One</div>

    <a class="main-holder" onClick="toggleHiddenContent(event)">Main two</a>
    <div class="hidden-content">Hidden content two</div>
</div>

Upvotes: 0

Related Questions