1

I have a div I'm hiding behind a button I want to toggle "onpress". I want that div to only be visible when someone presses down on the button layered above it.

I'm only aware of how to use onclick for toggling visibility. See the snippet.

I simply want a press function that toggles the show/hide of the button above the hidden div.

function myFunction() {
    var x = document.getElementById("button1");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
button {
width: inherit;
height: inherit;
}

body {
    background-color: black;
    }

#button1 {
    background-color: rgba(100,100,100,.5);
    position: absolute;
    width: 50vw;
    height: 10vw;
    z-index: 1000;    
}

#hiddendiv1 {
    background-color: orange;
    position: absolute;
    width: 50vw;
    height: 10vw;
    display: flex;
    align-items:center;
  justify-content: center; 
    z-index: -1000;
}
<div id=button1>
<button onclick="myFunction()">I want to toggle this button div off during "onpress"</button>
</div>

<div id=hiddendiv1>
I want to see this div ONLY when the button is being "pressed" down. 
</div>
logoologist
  • 205
  • 3
  • 15

1 Answers1

0

There's a mousedown event – https://developer.mozilla.org/en-US/docs/Web/Events/mousedown

document.getElementById('button').addEventListener('mousedown', function () {
  console.log('tada');
});
<button id="button">Press me, but never let go. ;)</button>

Cheers!

Mladen Ilić
  • 1,667
  • 1
  • 17
  • 21
  • for some reason switching between display="none" and "block" doesn't work for hiding/showing the div. `function mouseDown() { document.getElementById('button').style.display = "none";` } – logoologist Jun 22 '18 at 01:04
  • `.style.visibility = "hidden";` doesn't work for me either for `mouseUp` when I want to return the div to visible – logoologist Jun 22 '18 at 01:10