<div id="button">
  <button id="display-none" class="btn btn-primary">Toggle Opacity</button>
</div> 

<div id="parent">
  <div id="box-1"></div>
  <a href="#">
    <div id="box-2"></div>
  </a>
  <div id="box-3"></div>
  <p>As you can see the box is still clickable when hidden.</p>
</div>
#box-1 {
  display: inline-block;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 5px;
}
#box-2 {
  display: inline-block;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 5px;
}
#box-3 {
  display: inline-block;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 5px;
}
#parent {
  text-align: center;
}
#button {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 50px;
}
let display_none_count = 1;

$('#display-none').click(function() {
  display_none_count++
  if(display_none_count % 2 == 0) {
    $('#box-2').css(
      { 
        opacity: 0
      });
      $('#display-none').text('Toggle Opacity On');
  } else {
    $('#box-2').css(
      { 
        opacity: 1
      });
      $('#display-none').text('Toggle Opacity Off');
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js