Showing and Hiding Content

Showing and Hiding content is simple to achieve with some jQuery magic. The CSS property ‘display’ when set to ‘none’ will hide that content. The following CSS will hide a HTML <table> of class ‘facts’.

CSS

table.facts{
     display:none;	
}

Our trigger for the show/hide will be a <p> element of class ‘showFig’ as follows:

HTML

<p class="showFig">Show me the figures</p>

The show() method

Then we could create an event to show the table of facts.

jQuery

$(".showFig").click(function(){
     $(".facts").show();
});

JSFIDDLE Demo

The show() method will display content that has been hidden. It is roughly equivalent to setting the CSS on the matched HTML element to display:block.

Syntax
.show( [ duration ], [ easing ], [ callback ]

The jQuery show method has three option parameters. The duration of the animation in milliseconds, the easing effect applied to the animation and a function to be called once the animation has finished.

As well as values in milliseconds you can use the strings ‘fast’ and to indicate durations of 200 and 600 milliseconds, respectively.

jQuery has two built-in easing methods: linear and swing but plugins can add many more easing effects.

jQuery

$(".showFig").click(function(){
     $(".facts").show('fast', 'swing');
});

The hide() method

The hide() method does the reverse of the show() method. It again takes three optional parameters.

Syntax
.hide( [ duration ], [ easing ], [ callback ]

If you just want to hide the selected content straight away just call hide().

We could now extend our example by adding some more text with a class of ‘hideFig’ that when clicked hide the table.

Our HTML would be:

HTML

<p class="hideFig">Hide the figures</p>

and the new jQuery

jQuery

$(".showFig").click(function(){
     $(".facts").show();
});
$(".hideFig").click(function(){
     $(".facts").hide();
});

JSFIDDLE Demo

A toggle Example

It might be nice to toggle this table off/on from one text command.

Extending our example now add the following HTML.

HTML

<p class="toggleFig">Show/Hide the figures</p>

We create a variable to store the state of the toggle.

jQuery

var tableOn = false;
$(".toggleFig").on('click', function(){
  if(tableOn){
	$(".facts").hide('fast', 'linear');
    tableOn = false;
   }else{
	$(".facts").show('fast', 'linear');
    tableOn = true;
  }
});

JSFIDDLE Demo

The text() method

Taking the above toggle example further it may be nice to have the text that is clicked change to indicate what it will do – ie switch the view on/off.

The jQuery text() method can be used to get or set a text value on a selected element.

To change the text value of the element with class ‘toggleFig’ we would do the following.

jQuery

$(".facts").text("New Text Value Here");

Therefore if we add appropriate text dependent on the state of the table we wish to show/hide.

Our new code would be as follows:

jQuery

var tableOn = false;
$(".toggleFig").on('click', function(){
  if(tableOn){
      $(".facts").hide('fast', 'linear');
      $(this).text("Show the box");
      tableOn = false;
   }else{
       $(".facts").show('fast', 'linear');
       $(this).text("Hide the box");
       tableOn = true;
  }
});

JSFIDDLE Demo

Note: The text() method is a string containing the combined text of all matched elements, so careful selection is require.

The html() method

The above example could have also been achieved with the html() method. Like text(), html() is used to set or get the value of a selected element.

Therefore we could amend our example as follows. Notice that with the html() unlike text() we can also use HTML that we may wish to append.

jQuery

var tableOn = false;
$(".toggleFig").on('click', function(){
  if(tableOn){
      $(".facts").hide('fast', 'linear');
      $(this).html("Show the <strong>box</strong>");
      tableOn = false;
   }else{
       $(".facts").show('fast', 'linear');
       $(this).html("Hide the <strong>box</strong>");
       tableOn = true;
  }
});

JSFIDDLE Demo

Note: If the selector matches more than one element, only the first match will have its HTML content returned.

Leave a Comment