How to make divs appear and disappear?

Question

I have on my ui following html elements

<button onclick="getLocation()">Try It</button>

<p id="long"></p>Longitude<br>
<p id="lat"></p> Latitude<br>
<input type="text" id="ethaddress" placeholder="Enter your ETH address">
<button onclick="writeData()">Submit</button>

when someone visits the site i only want to show the user the "try me" button. once he clicks the "try me" button i want this button to dissapear and i want to show the elements with the id long, lat and ethaddress and the submit button

You find a link to an example here: http://shiny-reaction.surge.sh

Does this answer your question? [JavaScript hide/show element](https://stackoverflow.com/questions/6242976/javascript-hide-show-element) — Heretic Monkey, Oct 17 '20 at 22:37

anon · Accepted Answer · 2020-10-17T23:28:31.807

2

EDIT Now your issue is that in your js file your getLocation() function is defined as:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
  //  x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

So that will not be hiding or showing anything, you need to update this.

In vanilla js, you could try this:

function getLocation(btn){
  btn.style.display = "none";
  document.getElementById("form").style.display = "block";
}

#form{
  display: none;
}

<button id="button" onclick="getLocation(this)">Try It</button>
    
<form id="form">
  <p id="long"></p>Longitude<br>
  <p id="lat"></p> Latitude<br>
  <input type="text" id="ethaddress" placeholder="Enter your ETH address">
  <button onclick="writeData()">Submit</button>
</form>

edited Oct 17 '20 at 23:28

answered Oct 17 '20 at 22:34

anon

816
5
17

its not working over here, i get no errors so i dont know why i cant get it to work – yappy twan Oct 17 '20 at 22:49
If you can show the full code, otherwise there is no way to tell, the snippet runs fine here in stack overflow. – anon Oct 17 '20 at 22:50
i hosted it here on surge http://shiny-reaction.surge.sh – yappy twan Oct 17 '20 at 23:01
Please edit your post and add a minimum working example there. – anon Oct 17 '20 at 23:02
i updated the post with the link, i cant ost a minimum working example cause i only see the try me button – yappy twan Oct 17 '20 at 23:08
i copied and pasted exactly the code from you and it is not working – yappy twan Oct 18 '20 at 09:54

Ale Plo · Answer 2 · 2020-10-17T22:36:33.617

1

Depending if you want the elements to take up space you could go with visibility: hidden; or display: none;. You set app an eventlistener to change the display property to block. You can do this in pure JS or Jquery with addClass.

edited Oct 17 '20 at 22:36

answered Oct 17 '20 at 22:33

Ale Plo

799
4
11

`display: hidden` is not a valid css property – anon Oct 17 '20 at 22:35
Right! sorry visibilty:hidden; – Ale Plo Oct 17 '20 at 22:36

How to make divs appear and disappear?

2 Answers2