Table Of Contents: How To Create Table Of Content In Pages – Show Hide Function

In table of contents, the optional callback parameter is a function to be executed after the hide() or show() method completes. Calls the function unhide, and divID is the exact unique ID you want to show or hide. Sets up a variable i tem with the value of your div. Performs a simple browser check; if the browser doesn’t support getElementById , this script won’t work.

Put This CSS in Your Style-sheet

#target {
  background:#cccc;
  width:300px;
  height:300px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

You can customize css that fits your layout

Put This JS On Your Head Section

<script type='text/javascript'>
//<![CDATA[
$('.Show').click(function() {
    $('#target').show(500);
    $('.Show').hide(0);
    $('.Hide').show(0);
});
$('.Hide').click(function() {
    $('#target').hide(500);
    $('.Show').show(0);
    $('.Hide').hide(0);
});
$('.toggle').click(function() {
    $('#target').toggle('slow');
});
//]]>
</script> 

Put This Code On Your Page

<button class="Show">Content of Table</button>
<button class="Hide">Hide</button>
<div id="target"> HERE IS YOUR CONTENT THAT YOU WANT TO SHOW HIDE</div>

This function for table of content is definitely works. You Con Try It.

Note that .hide() is fired immediately and will override the animation queue if no duration or a duration of 0 is specified. As of jQuery 1.4.3 , an optional string naming an easing function may be used.