Edit in JSFiddle

function ShowHideDiv() {
  var x = document.getElementById('demohideonclick');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  };
  var y = document.getElementById('demomessage');
  if (y.style.display === 'block') {
    y.style.display = 'none';
  } else {
    y.style.display = 'block';
  }
}
<div id="demohideonclick">
  <p>
    This is content by Trine Paerata
  </p>
</div>

<div id="demomessage">
  <p>
    Once you click on the button, the previous content will be hidden and this message will appear.
  </p>
  <p>
    Cheers Trine
  </p>
</div>

<button id="buttonclick" type="button" onclick='ShowHideDiv()'>
  Click me!
</button>
#demohideonclick {
  display: block;
  border: 1px solid #FF0000;
  padding: 1em;
}

#demomessage {
  display: none;
  border: 1px dashed #FF0000;
  padding: 1em;
}

#buttonclick {
  padding: 1em;
  margin-top: 1em;
}