How to make a div disappear on click?

user_14385919 0
Viewed 2427

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>

divide onclick button css html
2 Answers

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 <a href="#" id="btn" onclick="this.focus();return false">Click</a> 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>

user_118707610
  1. Define your interactive node and your target node.
  2. Create event listener to handle click event.
  3. 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.

user_142305110
Related