CODEWITHSUNDEEP
javascripthtmlcss
Raj
Raj

Reputation: 11

How to show and hide div elements using vanilla JavaScript?

Below is code where i tried to show and hide div elements using pure JavaScript.

Since when I click the button it take three clicks to hide the div elements and after that it run smoothly. I was trying to find how to show elements in first 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()" />

Upvotes: 1

Views: 3811

Answers (4)

mplungjan
mplungjan

Reputation: 178403

Just toggle hidden.

If you want them to start out hidden, add the hidden attribute to the divs

const div1 = document.getElementById('linkMeOne');
const div2 = document.getElementById('linkMeTwo');
document.getElementById('showMe').addEventListener('click', () => {
  div1.hidden = !div1.hidden;
  div2.hidden = !div2.hidden;
})
<div id="linkMeOne">
  Hiding me As first time....
</div>

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

<input type="button" value="Toggle" id="showMe" />

Upvotes: 2

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

You could just toggle using a data attribute and some CSS. Here is a verbose version of 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" />

OR even 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" />

Upvotes: 0

tacoshy
tacoshy

Reputation: 13008

While there are many correct answers, all of them lack simplicity. The easiest of all solution is to add an eventListener to the button and toggle a class to all elements with a certain class. That way you don't have to list every single 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" />

Upvotes: 0

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

Just remove the addEventlistener and the code will start working.

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, use a class to set the display 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()" />

Upvotes: 0

Related Questions