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

JavaScript's multiple inheritance concept

I can't figure out why I'm receiving a TypeError stating that onSuccess is not a function within my AngularJS service

Use JavaScript to create a new window and load the HTML content from an external URL

Gaps separating frames

Ways to verify the presence of users in the Database

How can we use Python and Selenium to retrieve the text from HTML that includes the <p> tag?

Tips for preventing Razor from interpreting special characters as HTML code

Can the text within the <h3> element be displayed on top of the inline image without the use of <span> tags or background images?

Guide on transferring files between Node.js/Express servers from receiving files at Server A to sending files to Server B

Aligning two lines next to a radio button using HTML and CSS

How can we implement :focus-within styling on Material-UI Select when the input is clicked?

Exploring ways to assign a value to an HTML element utilizing Jquery in combination with ASP.NET MVC 4 complex model information

Choose ng-change within the table

Looking for a feature where users can easily update their profile using an interactive edit button

The issue arises when the logout component fails to render even after the user has been authenticated. This problem resembles the one discussed in the React Router

JavaScript is experiencing an error where it cannot define a function, rendering it unable to generate a JSON object due to its inability to recognize that the

Issues with routeparams are preventing ng-repeat from functioning properly, without any response or resolution

Ways to initiate state transition from child component to parent component using React Hooks?

Fixed-positioned elements

Ensure that the heading cells in the table header (thead) are properly