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.

Table Of Content

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.

Related Posts

How To Show / Hide The Widget in a Specific Page or Particular Page

The following conditional tags marked with blue just before and after to show the widget in a specific page in Blogger. For instance, if you want: Showing the widget in...Read more !

How to show / hide Blogger widget only in post pages

The following conditional tags marked with blue just before and after to hide the widget from specific pages in Blogger. For instance, if you want: Showing Blogger widget only in...Read more !

How To Show / Hide Widget In Mobile Page In Blogger

Showing / Hiding Widget In Mobile Page In Blogger: <b:if> is the most used tag in Blogger Theming. together, and a singleton <b:elseif> and <b:else> are a Conditional tag to give...Read more !

Leave a Reply

Your email address will not be published. Required fields are marked *