Crash Course On jQuery - Hiding and Showing Elements

Example of how to hide and show elements in jQuery.

by Tony Le

HTML

<!-- WRAPPER -->
<div id="wrapper">
  <button type="button" id="show-btn">Show Text Block</button>
  <button type="button" id="hide-btn">Hide Text Block</button>
  <p>Here is some awesome plain example text!</p> 
</div>
<!-- WRAPPER END -->

CSS

/* OUR INITIAL STYLE */

body {
  background-color: #fff;
  color: #000;
}

p {
  padding: 20px;
}

JavaScript

// if the hide button is clicked on
$('#hide-btn').on('click', function(){
	// hide the p tag
  $('p').hide();
});

// if the show button is clicked on
$('#show-btn').on('click', function(){
	// show the p tag
  $('p').show();
});