<div class='container'>

<div style='background-color: #b0e0e6; width:300px; height:200px; margin:10px auto'>

</div>

<div id='divToHide' style='background-color: #eeeeee; width:300px; height:200px; margin:10px auto'> <p>

  This is the div to hide

  </p>

</div>

<div style='background-color: #ffe4e1; width:300px; height:200px; margin:10px auto'>

</div>

  <button id='displayNoneBtn' class='btn btn-primary'>

    Display None

  </button>

    <button id='visibilityHiddenBtn' class='btn btn-primary'>

    Visibility Hidden

  </button>

   <button id='defaultDisplayBtn' class='btn btn-secondary'>

    Default display

  </button>

  </div>

.container {

  width:100%;

  display:flex;

  flex-direction:column;

}

#divToHide {

  position:relative;

  display: flex;

  justify-content:center;

  align-items:center;

}

​

#displayNoneBtn{

  position:absolute;

  top: 40%;

  left:10%;

}

​

#visibilityHiddenBtn{

  position:absolute;

  top: 40%;

  left:75%;

}

​

#defaultDisplayBtn{

 margin: 15px auto;

}

const displayBtn = document.getElementById('displayNoneBtn');

const visibilityBtn = document.getElementById('visibilityHiddenBtn');

const defaultBtn = document.getElementById('defaultDisplayBtn');

const divToHide = document.getElementById('divToHide');

​

// define functions

function setDefault() {

  divToHide.style.display = '';

  divToHide.style.visibility = '';

};

​

function setVisibilityHidden () {

  divToHide.style.visibility = 'hidden';

};

​

function setDisplayNone () {

  divToHide.style.display = 'none';

};

​

// add listeners to connect functions with buttons

visibilityBtn.addEventListener('click', setVisibilityHidden);

defaultBtn.addEventListener('click', setDefault);

displayBtn.addEventListener('click', setDisplayNone);

​