show-the-code

by Jos Vermeulen

HTML

<div style="margin-top:5vh">
<button id="change-text">
    <p id="toggle-text">Show the text</p>
</button>

<div class="thecode">
<h3>The Code</h3>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
</p>

</div>

CSS

.thecode {
  margin-top: 5vh;
}

button {
  width: 100px;
}

JavaScript

jQuery(document).ready(function(){
		jQuery('.thecode').hide();
			jQuery('#toggle-text').click(function(){
			jQuery('.thecode').toggle();
			});
});


$("#change-text").click(function () {
      $("#toggle-text").fade(function () {
			$("#toggle-text").hide(function () {
          $("#toggle-text").text(($("#toggle-text").text() == 'Show the text') ? 'Hide the text' : 'Show the text').fadeIn();
      });
      });
       });