Edit in JSFiddle

$(document).ready(function() {
  $("button#toggle").click(function() {
    $("#content p").toggle();
  });
  $("button#hide").click(function() {
    $("#content p").hide();
  });
  $("button#show").click(function() {
    $("#content p").show();
  });
  $("button#hidewithcallback").click(function() {
    $("#content p").hide(2000, function() {
      alert("Callback method fired!");
    });
  });
  $("button#fadeIn").click(function() {
    $("#content p").fadeIn();
  });
  $("button#fadeOut").click(function() {
    $("#content p").fadeOut();
  });
  $("button#slideUp").click(function() {
    $("#content p").slideUp();
  });
  $("button#slideDown").click(function() {
    $("#content p").slideDown();
  });
  $("button#slideToggle").click(function() {
    $("#content p").slideToggle();
  });
});

<h2>jCombat Demo - jQuery Selectors</h2>

<div id="content">
  <p>This is a paragraph.</p>
</div>

<button id="toggle">Click me to toggle paragraph div</button>
<br/>
<br/>
<button id="hide">Click me to hide paragraph div</button>
<br/>
<br/>
<button id="hidewithcallback">Click me to hide paragraph div with callback</button>
<br/>
<br/>
<button id="show">Click me to show paragraph div</button>
<br/>
<br/>
<button id="fadeIn">Click me to fadeIn paragraph div</button>
<br/>
<br/>
<button id="fadeOut">Click me to fadeOut paragraph div</button>
<br/>
<br/>
<button id="slideUp">Click me to slideUp paragraph div</button>
<br/>
<br/>
<button id="slideDown">Click me to slideDown paragraph div</button>
<br/>
<br/>
<button id="slideToggle">Click me to slideToggle paragraph div</button>
<br/>
<br/>

#content p {
  background-color: yellow;
}