Exploring the techniques for displaying and concealing div elements with pure JavaScript

Question

Exploring the techniques for displaying and concealing div elements with pure JavaScript

Here's an example of code I wrote to show and hide div elements using pure JavaScript.

I noticed that it takes three clicks to initially hide the div elements. After that, it works smoothly. I was attempting to figure out how to display the elements with just one click.

var count = 0;

function showMee() {
  var buttonHome = document.querySelector("#showMe");

  count += 1;
  buttonHome.addEventListener("click", function() {
    if (count == 1) {
      document.querySelector('#linkMeOne').style.display = 'none';
      document.querySelector('#linkMeTwo').style.display = 'none';
    } else if (count == 2) {
      document.querySelector('#linkMeOne').style.display = 'block';
      document.querySelector('#linkMeTwo').style.display = 'block';
      count = 0;
    }
  });
}

#linkMeOne {
  display: block;
}

#linkMeTwo {
  display: block;
}

<div id="linkMeOne">
  Hiding me As first time....
</div>

<div id="linkMeTwo">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" onclick="showMee()" />

javascript html css

Answer 1

Answer №1

Simply hide and reveal.

If you prefer them to be hidden initially, include the hidden attribute in the divs

const element1 = document.getElementById("toggleFirst");
const element2 = document.getElementById("toggleSecond");
document.querySelector("#reveal").addEventListener("click",function() {
   element1.hidden = !element1.hidden;
   element2.hidden = !element2.hidden;
})

<div id="toggleFirst">
  Concealing me at first....
</div>

<div id="toggleSecond">
  Keeping me hidden too...
</div>

<input type="button" value="Show/Hide" id="reveal" />

Answer 2

Simply hide and reveal.

If you prefer them to be hidden initially, include the hidden attribute in the divs

const element1 = document.getElementById("toggleFirst");
const element2 = document.getElementById("toggleSecond");
document.querySelector("#reveal").addEventListener("click",function() {
   element1.hidden = !element1.hidden;
   element2.hidden = !element2.hidden;
})

<div id="toggleFirst">
  Concealing me at first....
</div>

<div id="toggleSecond">
  Keeping me hidden too...
</div>

<input type="button" value="Show/Hide" id="reveal" />

Answer 3

Answer №2

To get the code working, simply delete the event listener for addEventlistener.

var count = 0;

function showMee() {
  var buttonHome = document.querySelector("#showMe");

  count += 1;
  //buttonHome.addEventListener("click", function() {
    if (count == 1) {
      document.querySelector('#linkMeOne').style.display = 'none';
      document.querySelector('#linkMeTwo').style.display = 'none';
    } else if (count == 2) {
      document.querySelector('#linkMeOne').style.display = 'block';
      document.querySelector('#linkMeTwo').style.display = 'block';
      count = 0;
    }
  //});
}

#linkMeOne {
  display: block;
}

#linkMeTwo {
  display: block;
}

<div id="linkMeOne">
  Hiding me As first time....
</div>

<div id="linkMeTwo">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" onclick="showMee()" />

Instead of using a variable, opt for a class to adjust the display property to none.

function showMee() {
  document.querySelector('#linkMeOne').classList.toggle('hidden');
  document.querySelector('#linkMeTwo').classList.toggle('hidden')
}

#linkMeOne {
  display: block;
}

#linkMeTwo {
  display: block;
}

.hidden {
  display: none !important;
}

<div id="linkMeOne">
  Hiding me As first time....
</div>

<div id="linkMeTwo">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" onclick="showMee()" />

Answer 4

To get the code working, simply delete the event listener for addEventlistener.

var count = 0;

function showMee() {
  var buttonHome = document.querySelector("#showMe");

  count += 1;
  //buttonHome.addEventListener("click", function() {
    if (count == 1) {
      document.querySelector('#linkMeOne').style.display = 'none';
      document.querySelector('#linkMeTwo').style.display = 'none';
    } else if (count == 2) {
      document.querySelector('#linkMeOne').style.display = 'block';
      document.querySelector('#linkMeTwo').style.display = 'block';
      count = 0;
    }
  //});
}

#linkMeOne {
  display: block;
}

#linkMeTwo {
  display: block;
}

<div id="linkMeOne">
  Hiding me As first time....
</div>

<div id="linkMeTwo">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" onclick="showMee()" />

Instead of using a variable, opt for a class to adjust the display property to none.

function showMee() {
  document.querySelector('#linkMeOne').classList.toggle('hidden');
  document.querySelector('#linkMeTwo').classList.toggle('hidden')
}

#linkMeOne {
  display: block;
}

#linkMeTwo {
  display: block;
}

.hidden {
  display: none !important;
}

<div id="linkMeOne">
  Hiding me As first time....
</div>

<div id="linkMeTwo">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" onclick="showMee()" />

Answer 5

Answer №3

Although there are numerous possible solutions, all of them seem to lack simplicity. The most straightforward solution is to attach an eventListener to the button and toggle a class for all elements with a specific class name. This way, you won't need to individually specify each element:

document.querySelector('#showMe').addEventListener('click', function() {
  document.querySelectorAll('.linkMe').forEach(el =>
    el.classList.toggle('d-block')
  );
})

.linkMe {
  display: none;
}

.d-block {
  display: block;
}

<div class="linkMe">
  Hiding me As first time....
</div>

<div class="linkMe">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" />

Answer 6

Although there are numerous possible solutions, all of them seem to lack simplicity. The most straightforward solution is to attach an eventListener to the button and toggle a class for all elements with a specific class name. This way, you won't need to individually specify each element:

document.querySelector('#showMe').addEventListener('click', function() {
  document.querySelectorAll('.linkMe').forEach(el =>
    el.classList.toggle('d-block')
  );
})

.linkMe {
  display: none;
}

.d-block {
  display: block;
}

<div class="linkMe">
  Hiding me As first time....
</div>

<div class="linkMe">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" />

Answer 7

Answer №4

One way to achieve toggling is by using a data attribute along with CSS. Here's an elaborate explanation of how you can do that:

document.querySelector("#showMe")
  .addEventListener("click", (event) => {
    const t = event.target;
    const showem = t.dataset.show;
    document.querySelectorAll('.can-toggle').forEach((element) => {
      element.dataset.show = showem;
    });
    t.dataset.show = showem == "show" ? "hide" : "show";
  });

.can-toggle[data-show="hide"] {
  display: none;
}

<div class="can-toggle">
  Hiding me As first time....
</div>

<div class="can-toggle">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" data-show="hide" />

Alternatively, you can handle each toggle independently with an initial state:

document.querySelector("#showMe")
  .addEventListener("click", (event) => {
    document.querySelectorAll('.can-toggle').forEach((element) => {
      element.dataset.show = element.dataset.show == "hide" ? "show" : "hide";
    });
  });

.can-toggle[data-show="hide"] {
  display: none;
}

<div class="can-toggle" data-show="hide">
  Hiding me As first time....
</div>
<div class="can-toggle">
  Hiding me as well as...
</div>
<div class="can-toggle" data-show="Ishow">
  What am I?
</div>

<input type="button" value="Check Me" id="showMe" data-show="hide" />

Answer 8

One way to achieve toggling is by using a data attribute along with CSS. Here's an elaborate explanation of how you can do that:

document.querySelector("#showMe")
  .addEventListener("click", (event) => {
    const t = event.target;
    const showem = t.dataset.show;
    document.querySelectorAll('.can-toggle').forEach((element) => {
      element.dataset.show = showem;
    });
    t.dataset.show = showem == "show" ? "hide" : "show";
  });

.can-toggle[data-show="hide"] {
  display: none;
}

<div class="can-toggle">
  Hiding me As first time....
</div>

<div class="can-toggle">
  Hiding me as well as...
</div>

<input type="button" value="Check Me" id="showMe" data-show="hide" />

Alternatively, you can handle each toggle independently with an initial state:

document.querySelector("#showMe")
  .addEventListener("click", (event) => {
    document.querySelectorAll('.can-toggle').forEach((element) => {
      element.dataset.show = element.dataset.show == "hide" ? "show" : "hide";
    });
  });

.can-toggle[data-show="hide"] {
  display: none;
}

<div class="can-toggle" data-show="hide">
  Hiding me As first time....
</div>
<div class="can-toggle">
  Hiding me as well as...
</div>
<div class="can-toggle" data-show="Ishow">
  What am I?
</div>

<input type="button" value="Check Me" id="showMe" data-show="hide" />

Exploring the techniques for displaying and concealing div elements with pure JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the reason behind Next.js inability to import files within a directory?

Placing the jQuery/javascript source pages right before the closing body tag

Having trouble accessing the scrollHeight property of null when using Selenium WebDriver

Guide on increasing a basic counter and a counter with an object component using redux

Authenticating the Gmail API using a specified user ID

What is the best way to connect individual buttons to a dynamic div that displays different content depending on the button clicked?

What impact does reselect have on the visual presentation of components?

Triggering a jQuery event upon clicking a link

Revamping the vertices and UVs of DecalGeometry

Utilize dropdown1 to dynamically populate dropdown 2 in AngularJS

AngularJS factory architecture for multiple functions

The form is functioning properly on mobile devices but is currently experiencing issues on the server

Retrieving data from a backend express server using Client-side Javascript

Could you explain the distinction between push and offset within the grid system?

Is the jquery autocomeplete plugin malfunctioning when using numbers in the input?

Struggling to dynamically update array values by comparing two arrays

Unexpected syntax error occurs while retrieving data from web API using jQuery AJAX request

Using React and Ant Design: Sharing state between multiple <Select> components within a <Form> element

The audio directory is not included in the build of the Ionic framework, causing it to be skipped and absent

Canvas only draws outside the table, with the exception of the first one