Ways to display or conceal various divs by employing an if/else statement?

Question

Ways to display or conceal various divs by employing an if/else statement?

I am aiming to conditionally display various divs based on certain criteria:

Show the "x" div if it's not already visible
Display the "y" div only if the "x" div is already being displayed
Show the "z" div only if both the "x" and "y" divs are already visible

The following code allows me to toggle a single div between displaying and not displaying:

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

However, when I attempt to do this for multiple divs, it doesn't work as expected.

Here is an example of what I tried:

function myFunction() {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");

  if (x.style.display === "none") {
    x.style.display = "block";
  } else if (y.style.display === "none") {
    y.style.display = "block";
  } else {
    console.log("It worked!");
  }
}

I have created a couple of CodePens to demonstrate these snippets:

I would be grateful for any assistance. Thank you!

javascript html css

Answer 1

Answer №1

Let's go step by step in the initial myFunction. This approach will be reliable since it involves a straightforward decision process - "is x set to display: none? if yes, do X; otherwise, do Y." This mechanism operates on binary logic and covers all scenarios effectively as it simply toggles the style.display property. However, as you introduce more complex conditions and factors, the situation may become trickier and require a more careful formulation of your strategy.

The desired logic essentially states that if X is hidden, reveal it; if y is hidden AND x is visible, show it; lastly, if X, Y, and Z have specific visibility combinations, show Z. You can make this logic more readable by creating concise helper functions like isHidden(), isVisible(), and show():

UPDATE: FZs brought up an important point regarding classes not being considered in this rationale. To address this, we can incorporate an additional condition checking for the presence of the "hidden" class using classList within the isHidden() function.

// helper functions
let isHidden = (el) => el.style.display == "none" || el.classList.contains('hidden'),
    isVisible = (el) => !isHidden(el),
    show = (el) => el.style.display = "block";

// DOM elements
let x = document.getElementById("div-x"),
    y = document.getElementById("div-y"),
    z = document.getElementById("div-z");

// click event handler
let handleClick = () => {

  if (isHidden(x))
    show(x);

  else if (isHidden(y) && isVisible(x))
    show(y);

  else if (isHidden(z) && isVisible(y) && isVisible(x))
    show(z);

  else console.log("Success!");
  
}

document.getElementById('btn').addEventListener('click', handleClick);

<div id="div-x" style="display:none">X</div>
<div id="div-y" style="display:none">Y</div>
<div id="div-z" style="display:none">Z</div>

<button id="btn">Click Here!</button>

Answer 2

Let's go step by step in the initial myFunction. This approach will be reliable since it involves a straightforward decision process - "is x set to display: none? if yes, do X; otherwise, do Y." This mechanism operates on binary logic and covers all scenarios effectively as it simply toggles the style.display property. However, as you introduce more complex conditions and factors, the situation may become trickier and require a more careful formulation of your strategy.

The desired logic essentially states that if X is hidden, reveal it; if y is hidden AND x is visible, show it; lastly, if X, Y, and Z have specific visibility combinations, show Z. You can make this logic more readable by creating concise helper functions like isHidden(), isVisible(), and show():

UPDATE: FZs brought up an important point regarding classes not being considered in this rationale. To address this, we can incorporate an additional condition checking for the presence of the "hidden" class using classList within the isHidden() function.

// helper functions
let isHidden = (el) => el.style.display == "none" || el.classList.contains('hidden'),
    isVisible = (el) => !isHidden(el),
    show = (el) => el.style.display = "block";

// DOM elements
let x = document.getElementById("div-x"),
    y = document.getElementById("div-y"),
    z = document.getElementById("div-z");

// click event handler
let handleClick = () => {

  if (isHidden(x))
    show(x);

  else if (isHidden(y) && isVisible(x))
    show(y);

  else if (isHidden(z) && isVisible(y) && isVisible(x))
    show(z);

  else console.log("Success!");
  
}

document.getElementById('btn').addEventListener('click', handleClick);

<div id="div-x" style="display:none">X</div>
<div id="div-y" style="display:none">Y</div>
<div id="div-z" style="display:none">Z</div>

<button id="btn">Click Here!</button>

Answer 3

Answer №2

When you use elem.style, it retrieves the inline style (style="/* styles */") of the element elem.

In the case of #myDiv and #myDiv2, they only have styles applied by stylesheets, so when you check x.style.display, it will return undefined instead of "none".

A solution is to toggle a .hidden class on the elements:

function myFunction() {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");

  if (x.classList.contains("hidden")) {
    x.classList.remove("hidden");
  } else if (y.classList.contains("hidden")) {
    y.classList.remove("hidden");
  } else {
    console.log("It worked!");
  }
}

.hidden{
  display: none;
}

<div id="myDiv" class="hidden"></div>
<div id="myDiv2" class="hidden"></div>

Alternatively, to show them alternately (assuming that was the intention):

function myFunction() {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");
  x.classList.toggle("hidden")
  y.classList.toggle("hidden")
}

.hidden{
  display: none;
}

<div id="myDiv"></div>
<div id="myDiv2" class="hidden"></div>

Answer 4

When you use elem.style, it retrieves the inline style (style="/* styles */") of the element elem.

In the case of #myDiv and #myDiv2, they only have styles applied by stylesheets, so when you check x.style.display, it will return undefined instead of "none".

A solution is to toggle a .hidden class on the elements:

function myFunction() {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");

  if (x.classList.contains("hidden")) {
    x.classList.remove("hidden");
  } else if (y.classList.contains("hidden")) {
    y.classList.remove("hidden");
  } else {
    console.log("It worked!");
  }
}

.hidden{
  display: none;
}

<div id="myDiv" class="hidden"></div>
<div id="myDiv2" class="hidden"></div>

Alternatively, to show them alternately (assuming that was the intention):

function myFunction() {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");
  x.classList.toggle("hidden")
  y.classList.toggle("hidden")
}

.hidden{
  display: none;
}

<div id="myDiv"></div>
<div id="myDiv2" class="hidden"></div>

Ways to display or conceal various divs by employing an if/else statement?

Answer №1

Answer №2

Similar questions

Concealing inactive select choices on Internet Explorer versions greater than 11 with the help of AngularJS

Tips for customizing Bootstrap theme color schemes in a React/Redux application that has been bootstrapped

Bootstrap 4 - The Mystery of 'col-sm-auto' Taking Precedence Over 'col-md-4'

Positioning of Cloned Element in jQuery

Show the button's value inside a div when clicked using Javascript and HTML

What is preventing me from using Selenium/Javascript to control Firefox on Ubuntu 22.04, when I am able to do so with Python?

Canvas not displaying image in JavaScript

CodeIgniter - Utilizing quotes within a form

Using routerLink for linking to multiple components

Dynamic Checkbox Functionality in REACT

The path('/') in $rootScope is not functioning properly

Top techniques for dynamic loading of HTML and Javascript

Problem with sending JSON-encoded arrays to an API

Merge the chosen values from the drop-down menu into one string

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

Are image collections featuring the <img> tag available?

Having trouble customizing the Material UI button in React?

React.Children does not reveal the presence of any offspring

The text in the <p> tag will remain the same color

Maintain the selected image