How to switch between display:none/block of input field using onclick only once?

Question

I would like to change display property of this input (actually of div which contains it) after onclick ("Click here"). This part goes well ... but after clicking again I want it to be hidden again (has display="none" instead of "block" again and so on) and here I have difficulties. I've tried classList.toggle but ... I' don't want to change classes, I want to change just one property. I know there is also possibility of creating my input field by using Javascript but I presume I'll come to a deadlock again in the same point.

 <form role="form">
      <p id="mag">Click here!</p>

  <div id="switch" class="xxx"style="display:none;" >
  <input id="sr"class="offf" autocomplete="off" placeholder="Search" type="text" >

  </div>
  </form>   



document.getElementById("mag").addEventListener("click", function toffi(){

  document.getElementById("switch").style.display="block";

       console.log(document.getElementById("switch").style.display);


});

http://codepen.io/zeeebra/pen/RgRYxK

user5085788 · Accepted Answer · 2017-06-13 16:33:41Z

4

Try this:

document.getElementById("mag").addEventListener("click", function toffi(){
  var sw = document.getElementById("switch");
  if (sw.style.display === "block") {
    sw.style.display = "none";
  } else {
    sw.style.display = "block";
  }
  console.log(sw.style.display);
});

answered Jun 13, 2017 at 16:33

user5085788

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to switch between display:none/block of input field using onclick only once?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related