Toggle

dabblet.css

/**
 * Toggle
 */

body{
	background: #111;
}
.container{
	background: #fff;
	margin:0 auto;
	padding: 10px;
	width: 300px;
}
#more-less-button{
	display: block;
	margin: 0 auto;
	padding: 10px
}

dabblet.html

<div class="container">
	<button id="more-less-button" onclick="toggleHelpBox()" jsdisplay="more" jsvalues=".moreText:more; .lessText:less;" jscontent="more" jstcache="4">Less</button>
	<div id="help-box-outer" class="hidden" jstcache="0">
	   The contents of this text is only an example for you to see.
  </div>
</div>

dabblet.js

function toggleHelpBox() {
  var helpBoxOuter = document.getElementById('help-box-outer');
  helpBoxOuter.classList.toggle('hidden');
  var moreLessButton = document.getElementById('more-less-button');
  if (helpBoxOuter.classList.contains('hidden')) {
    moreLessButton.innerText = moreLessButton.moreText;
  } else {
    moreLessButton.innerText = moreLessButton.lessText;
  }
}

settings.json

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