Loop through the elements of a class in JavaScript and choose all except for the one that was

Question

Loop through the elements of a class in JavaScript and choose all except for the one that was

Imagine having 5 div elements, each with a similar onclick-function that hides the other divs when clicked.

HTML:

<div id="1" class="divs" onclick="hide()"></div>
<div id="2" class="divs" onclick="hide()"></div>
<div id="3" class="divs" onclick="hide()"></div>
<div id="4" class="divs" onclick="hide()"></div>
<div id="5" class="divs" onclick="hide()"></div>

This is what has been attempted:

JavaScript:

function hide(){
    var divs = document.getElementsByClassName("divs");
    for(var i = 0; i < arrows.length; i++){
        if(this != arrows[i]){
            arrows[i].style.display = "none";
        }
    }
}

The current outcome results in all divs being hidden, rather than just leaving the clicked element visible. Looking to achieve this using vanilla JS instead of jQuery's ":not()" selector. Any tips?

Appreciate any help provided.

javascript html css

Answer 1

Answer №1

Avoid using event handler content attributes; instead, utilize event listeners for better functionality.

var divs = document.getElementsByClassName("divs");
function hide() {
  for(var i = 0; i < divs.length; i++){
    if(this != divs[i]){
      divs[i].style.display = "none";
    }
  }
}
[].forEach.call(divs, function(div) {
  div.addEventListener('click', hide);
});

<div id="1" class="divs">1</div>
<div id="2" class="divs">2</div>
<div id="3" class="divs">3</div>
<div id="4" class="divs">4</div>
<div id="5" class="divs">5</div>

Answer 2

Avoid using event handler content attributes; instead, utilize event listeners for better functionality.

var divs = document.getElementsByClassName("divs");
function hide() {
  for(var i = 0; i < divs.length; i++){
    if(this != divs[i]){
      divs[i].style.display = "none";
    }
  }
}
[].forEach.call(divs, function(div) {
  div.addEventListener('click', hide);
});

<div id="1" class="divs">1</div>
<div id="2" class="divs">2</div>
<div id="3" class="divs">3</div>
<div id="4" class="divs">4</div>
<div id="5" class="divs">5</div>

Answer 3

Answer №2

To hide a specific div in HTML, you can pass this as a parameter inside the hide() function. Then, in your JavaScript function, you can manipulate the clicked DOM object to show the desired div.

Sample HTML:

<div id="1" class="divs" onclick="hide(this)"></div>
<div id="2" class="divs" onclick="hide(this)"></div>
<div id="3" class="divs" onclick="hide(this)"></div>
<div id="4" class="divs" onclick="hide(this)"></div>
<div id="5" class="divs" onclick="hide(this)"></div>

JavaScript Function:

function hide(obj){
    var divs = document.getElementsByClassName("divs");
    for(var i = 0; i < divs.length; i++){
        if(obj != divs[i]){
            divs[i].style.display = "none";
        }
    }
}

Answer 4

To hide a specific div in HTML, you can pass this as a parameter inside the hide() function. Then, in your JavaScript function, you can manipulate the clicked DOM object to show the desired div.

Sample HTML:

<div id="1" class="divs" onclick="hide(this)"></div>
<div id="2" class="divs" onclick="hide(this)"></div>
<div id="3" class="divs" onclick="hide(this)"></div>
<div id="4" class="divs" onclick="hide(this)"></div>
<div id="5" class="divs" onclick="hide(this)"></div>

JavaScript Function:

function hide(obj){
    var divs = document.getElementsByClassName("divs");
    for(var i = 0; i < divs.length; i++){
        if(obj != divs[i]){
            divs[i].style.display = "none";
        }
    }
}

Answer 5

Answer №3

One way to achieve this is through the following code snippets:

HTML

<div id="1" class="boxes" onclick="hideContent(this)">q</div>
<div id="2" class="boxes" onclick="hideContent(this)">w</div>
<div id="3" class="boxes" onclick="hideContent(this)">e</div>
<div id="4" class="boxes" onclick="hideContent(this)">r</div>
<div id="5" class="boxes" onclick="hideContent(this)">7</div>

JavaScript

<script>
function hideContent(element){
    var divElements = document.getElementsByClassName("boxes");
    for(var j = 0; j < divElements.length; j++){
        if(element != divElements[j]){
            divElements[j].style.display = "none";
        }
    }
}
</script>

Answer 6

One way to achieve this is through the following code snippets:

HTML

<div id="1" class="boxes" onclick="hideContent(this)">q</div>
<div id="2" class="boxes" onclick="hideContent(this)">w</div>
<div id="3" class="boxes" onclick="hideContent(this)">e</div>
<div id="4" class="boxes" onclick="hideContent(this)">r</div>
<div id="5" class="boxes" onclick="hideContent(this)">7</div>

JavaScript

<script>
function hideContent(element){
    var divElements = document.getElementsByClassName("boxes");
    for(var j = 0; j < divElements.length; j++){
        if(element != divElements[j]){
            divElements[j].style.display = "none";
        }
    }
}
</script>

Answer 7

Answer №4

Check out this simple demonstration to see how you can achieve the desired effect using CSS:

window.onload = () => {
 
  var divs = document.getElementsByClassName('divs');

  for(let div of divs) {
    div.onclick = (e) => {
     for(let visibleDiv of divs) {
              if(visibleDiv != e.target) {
              visibleDiv.style.display = "none";
              }
          }
      }
  }
  
}

.container {
    display: flex;
    justify-content: space-between;
}

.divs {
    width: 50px;
    height: 50px;
    background-color: #e67e22
}

<div class="container">    
    <div id="1" class="divs"></div>
    <div id="2" class="divs"></div>
    <div id="3" class="divs"></div>
    <div id="4" class="divs"></div>
    <div id="5" class="divs"></div>
</div>

Answer 8

Check out this simple demonstration to see how you can achieve the desired effect using CSS:

window.onload = () => {
 
  var divs = document.getElementsByClassName('divs');

  for(let div of divs) {
    div.onclick = (e) => {
     for(let visibleDiv of divs) {
              if(visibleDiv != e.target) {
              visibleDiv.style.display = "none";
              }
          }
      }
  }
  
}

.container {
    display: flex;
    justify-content: space-between;
}

.divs {
    width: 50px;
    height: 50px;
    background-color: #e67e22
}

<div class="container">    
    <div id="1" class="divs"></div>
    <div id="2" class="divs"></div>
    <div id="3" class="divs"></div>
    <div id="4" class="divs"></div>
    <div id="5" class="divs"></div>
</div>

Loop through the elements of a class in JavaScript and choose all except for the one that was

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide to setting up a node.js server that serves HTML files with CSS styling

Showing an array in angular.js

Transforming JSON object to an array of arrays using JavaScript

What is the best way to load specific CSS in an rhtml file?

MongoDB was successfully updated, however the changes are not being displayed on the redirected

Displaying CSS image slideshow images side by side

How to adjust background size for Iphone4 and Iphone5 simulators using only HTML5 and CSS3 code

The variables in Next.js reset every time I navigate to a new page

Material UI: Easily adjusting font size within Lists

What is the proper way to display the date and time 2021-11-14T18:30:00.000+00:00?

What is the best way to display every comment and response using console.log()?

I am interested in using the split method to separate and then mapping an object in JavaScript

Methods for adjusting columns and rows in HTML5 tables

Position a div off-center using CSS styling

Styling CSS variables uniquely

Typescript's way of mocking fetch for testing purposes

Variable declared in $scope suddenly losing its definition

Adding a class to a field tag in a Django form: A step-by-step guide

Error: Module specifier "react-router-dom" could not be resolved. Relative references should start with either "/", "./", or "../"

Is it more effective to be precise when choosing IDs in CSS?