Default State

dabblet.css

a.click-button { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
   margin: 0 2px;
  padding: 0 5px;
  cursor: pointer;
  text-decoration: none;
}

/* Default State */
div#toggle-1 {
   display:none;
   width: 80%;
   height: auto;
   line-height: auto;
   color: #000;
   text-align: center;
   margin:0 auto;
   padding: 30px; 
  }

/* Toggled State */
div#toggle-1:target{
   display:block;
}

dabblet.html

Mid porttitor nascetur in quis pulvinar, urna aliquam lectus placerat, mid rhoncus, integer magnis placerat, parturient risus montes mauris cras turpis mid! Sagittis sed! Diam quis adipiscing purus amet ultricies, proin ultrices dictumst odio in cum dis arcu lectus urna porttitor phasellus? <a href="#toggle-1" class="click-button">Show</a><a href="#" class="click-button">Hide</a>
<div id="toggle-1">Here I've written the text I want to hide behind the button - the text only appears when the button is clicked</div>Et augue. Dolor, massa nunc aenean, nec elit.
Urna parturient sit pulvinar dignissim! Elit nunc eu parturient, aenean.Placerat ut nisi.  Egestas quis parturient sociis augue porttitor nunc vut porta pid lectus! Mid a lundium aliquam et, odio mid, enim adipiscing! Enim sed mauris purus turpis scelerisque, pid ac sociis pulvinar quis nunc dapibus scelerisque natoque elementum.

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}