How to show and hide div elements using vanilla js-CodePudding

Below is code where i tried to show and hide div elements using pure js. Since when i click button it take three click to hide the div elemnts and after that it run smoothly. I was trying to find how to show elemnts 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()" />

CodePudding user response：

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.querySelector("#showMe").addEventListener("click",function() {
   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="Check Me" id="showMe"  />

CodePudding user response：

That happens because you add the click event listener, inside the other click event which make the event get duplicated, you need to add the other click event listener outside.

var count = 0;
var buttonHome = document.querySelector("#showMe");
function showMee() {
  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()" />

Also, I suggest you to use a class to hide the elements and toggle it instead, it will be much cleaner.

const buttonHome = document.getElementById('showMe');
const linkOne = document.getElementById('linkMeOne');
const linkTwo = document.getElementById('linkMeTwo');


  buttonHome.addEventListener("click", function() {
    linkOne.classList.toggle('hide');
    linkTwo.classList.toggle('hide');
  });

#linkMeOne {
  display: block;
}

#linkMeTwo {
  display: block;
}

.hide {
  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" />

CodePudding user response：

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()" />

CodePudding user response：

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 >
  Hiding me As first time....
</div>

<div >
  Hiding me as well as...
</div>

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

CodePudding user response：

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 >
  Hiding me As first time....
</div>

<div >
  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  data-show="hide">
  Hiding me As first time....
</div>
<div >
  Hiding me as well as...
</div>
<div  data-show="Ishow">
  What am I?
</div>

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