How to make a div disappear on click? - html

Question

I been trying all day to find a nice simple short pure-css/html code only to make a div disappear when a button is clicked. I would prefer CSS but if not possible will take a JS solution instead.
Lot of solutions on overflow but most use js. please take a look at my code below and add a example or suggestion below. Thanks for any help, Stewy
body {
background-color: #6B6B6B;
font-family: Arial;
color: grey;
font-size: 12px;
margin: 0px;
}
/*............... bgcover ...............*/
.bgcover {
position: fixed;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, .4);
}
.call {
position: fixed;
top: 100px;
left: 100px;
}
/*........ crossfade on buttons ........*/
.hover,.nohover{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;
}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
<div class="bgcover" align="center">
<p>Button turns off this bg cover div.</p>
</div>
<div class="call">
<a href="bgcoveroff.htm">
<img src="http://wizzfree.com/pix/call2.png" width="100" class="nohover">
<img src="http://wizzfree.com/pix/call.png" width="100" class="hover"></a>
</div>

Answer 1

Define your interactive node and your target node.
Create event listener to handle click event.
create a function which would hide your second element
const button = document.getElementById('button'); // or classname, whatever. it is your link or any node element instead of it.
const div = document.getElementById('targetDiv');
function toggleDiv(e) {
// e - event object - {button}.
e.preventDefault(); // only if you use <a> as node.
div.classList.add("my-classname-to-hide-div");
}
button.addEventListener('click', toggleDiv, false);
css
.my-classname-to-hide-div {
display: none;
// or
opacity: 0;
visibility: hidden;
transition: all 0.2s all;
}
ps. if you use JQuery the code could be much simpler and you can use built-in transition effects.

Answer 2

You have to pass the the inline JS in tag. than only possible to hide the element. onclick attribute should need to trigger.
Like this Click
Hi Stewy please check this code. It is example of the inline js.
body {
background-color: #6B6B6B;
font-family: Arial;
color: grey;
font-size: 12px;
margin: 0px;
}
/*............... bgcover ...............*/
.bgcover {
position: fixed;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, .4);
}
.call {
position: fixed;
top: 100px;
left: 100px;
}
/*........ crossfade on buttons ........*/
.hover,.nohover{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;
}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
.hidden{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bgcover" id=box align="center">
<p>Button turns off this bg cover div.</p>
</div>
<div class="call">
<a id="btn" onclick="document.getElementById('box').classList.toggle('hidden');" >
<img src="http://wizzfree.com/pix/call2.png" width="100" class="nohover">
<img src="http://wizzfree.com/pix/call.png" width="100" class="hover"></a>
</div>