Ways to pinpoint a particular division and switch its class on and off?

Question

Ways to pinpoint a particular division and switch its class on and off?

Consider this scenario, where a menu is presented:

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>

Despite the functionality, it currently toggles all classes. I am aware of the issue, but I am seeking a method to target only the clicked element and not those untouched. Any ideas on how to achieve this using vanilla javascript?

Your assistance would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

classList.toggle is actually a function and not something that can be assigned as a property.

Visit this link for more information on classList

You can try the following code snippet:

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 recommend making some minor tweaks to improve readability such as enclosing the content in a parent <div> and removing the onClick attribute from HTML. You can view the updated code here:

Check out the fiddle for the changes

The answer provided below mentions using nextElementSibling which eliminates the need to modify your HTML as suggested above.

Answer 2

classList.toggle is actually a function and not something that can be assigned as a property.

Visit this link for more information on classList

You can try the following code snippet:

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 recommend making some minor tweaks to improve readability such as enclosing the content in a parent <div> and removing the onClick attribute from HTML. You can view the updated code here:

Check out the fiddle for the changes

The answer provided below mentions using nextElementSibling which eliminates the need to modify your HTML as suggested above.

Answer 3

Answer №2

Here is a suggestion you can try:

function toggleHiddenContent(elem) {
    if (elem.target.nextElementSibling.classList.contains("visible-class")) {
        elem.target.nextElementSibling.className = "hidden-content";
      
    } else {
        elem.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>

Answer 4

Here is a suggestion you can try:

function toggleHiddenContent(elem) {
    if (elem.target.nextElementSibling.classList.contains("visible-class")) {
        elem.target.nextElementSibling.className = "hidden-content";
      
    } else {
        elem.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>

Answer 5

Answer №3

If you're looking to enhance user experience while also avoiding intrusive JavaScript, consider implementing the following approach:

//Identify and store the elements you wish to interact with in an array:
let myElements = document.getElementsByClassName("main-holder");
//Iterate through the array to add event listeners to each interactive element:
for (let i = 0; i < 10; i++) {
  if (myElements[i]) {
    myElements[i].addEventListener("click", function() {
      //Your custom function:
      toggleHiddenContent("visible-class", i);
    });
  }
}

function toggleHiddenContent(tabClass, target) {
  //Retrieve and store the elements you want to modify in another array:
  let targetElements = document.getElementsByClassName("hidden-content");
  //Use the index from the clicked element to determine which targeted element to modify:
  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

Should you require further assistance or clarification, please feel free to reach out in the comments below.

Answer 6

If you're looking to enhance user experience while also avoiding intrusive JavaScript, consider implementing the following approach:

//Identify and store the elements you wish to interact with in an array:
let myElements = document.getElementsByClassName("main-holder");
//Iterate through the array to add event listeners to each interactive element:
for (let i = 0; i < 10; i++) {
  if (myElements[i]) {
    myElements[i].addEventListener("click", function() {
      //Your custom function:
      toggleHiddenContent("visible-class", i);
    });
  }
}

function toggleHiddenContent(tabClass, target) {
  //Retrieve and store the elements you want to modify in another array:
  let targetElements = document.getElementsByClassName("hidden-content");
  //Use the index from the clicked element to determine which targeted element to modify:
  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

Should you require further assistance or clarification, please feel free to reach out in the comments below.

Ways to pinpoint a particular division and switch its class on and off?

Answer №1

Answer №2

Answer №3

Similar questions

Ways to hover and efficiently organize components?

Controller is not being triggered by Ajax method when there is a decimal value

Identifying the relationship between child and parent components in Vue.js

What is the best way to implement momentJS globally in VueJS 2?

Obtain the response header variable within a Shiny application

Tips on retrieving JSON data in a Bottle (Python framework) using a Jquery script

Reset the default value of the "Bootstrap Select2" dropdown

Countdown Clock for Displaying Parsing Time in C#

What causes the discrepancy in the output of `document.documentElement.childNodes` in JavaScript?

What is the process for mediating a SWF-Flash file with a PHP mediating, also known as an HTTP-Pseudostreaming script?

Conceal the parent element if there are no elements present within the child element

Ensure that adjacent elements operate independently from one another

`problem encountered when attempting to sanitize HTML through the npm package known as "sanitize-html"`

Sending a parameter between files in a React application: a step-by-step guide

utilize a modal button in Angular to showcase images

Expressing the power of multiple nested routers

Tips on how to stop label text from wrapping onto a new line and only show one line

Despite providing the correct token with Bearer, Vue 3 is still experiencing authorization issues

The functionality of a Vue custom tooltip behaves strangely after clicking the button multiple times

Enhancing user experience by highlighting invalid input fields with a red border using client-side HTML5 validation and Bootstrap 5.2