Use your left/right keys to browse tutorials
jQuery Show / Hide Plugin

jQuery Show / Hide Plugin

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on September 28, 2011

Due to popular demand here’s a re-written version of the tutorial I wrote over a year ago on how to show and hide content using jQuery. After I first published the post I’ve had a lot of requests as to how you can show and hide multiple divs so I’ve written this plugin which does all the work for you!

The Plugin

(function ($) {
    $.fn.showHide = function (options) {

	//default vars for the plugin
        var defaults = {
            speed: 1000,
			easing: '',
			changeText: 0,
			showText: 'Show',
			hideText: 'Hide'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv').slideUp(options.speed, options.easing);
			 // this var stores which button you've clicked
             var toggleClick = $(this);
		     // this reads the rel attribute of the button to determine which div id to toggle
		     var toggleDiv = $(this).attr('rel');
		     // here we toggle show/hide the correct div at the right speed and using which easing effect
		     $(toggleDiv).slideToggle(options.speed, options.easing, function() {
		     // this only fires once the animation is completed
			 if(options.changeText==1){
		     $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
			 }
              });

		  return false;

        });

    };
})(jQuery);

The Usage

Here we setup the options for the plugin. you can set the speed of the toggle, if you include the jQuery UI plugin you can specify an easing effect. Also there’s an option to change the text for the button. 1 is change 0 is dont change. and the final options are the show and hide text.


$(document).ready(function(){

   $('.show_hide').showHide({
		speed: 1000,  // speed you want the toggle to happen
		easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
		changeText: 1, // if you dont want the button text to change, set this to 0
		showText: 'View',// the button text to show when a div is closed
		hideText: 'Close' // the button text to show when a div is open

	});

});

The HTML

Here you can see the simple usage for the plugin. We’ve already set the plugin options above in our DOM ready function now here we set our divs up. for element you want to toggle, you just need to add the div id to the rel attribute of the a tag as shown below. You can now add as many show hide divs as you want to.

If you want all the open divs to close when you click to open another simply add the class .toggleDiv to each element.

 <a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
<pre>
 <a class="show_hide" href="#" rel="#slidingDiv_2">View</a></pre>
<div id="slidingDiv_2" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
<pre>

download



More tutorials from Papermashup
  • Luke McLachlan

    ok so ignore my question. i manage to get an image showing by editing the showHide.js file :

    if(options.changeText==1){

    $(toggleDiv).is(“:visible”) ? toggleClick.html(options.hideText) : toggleClick.html(options.showText);

    all done.

  • Luke McLachlan

    thank you for this. I wonder though, is it possible to show an image in showText and hideText? I’ve been trying to do this but only the image reference is showing? thanks

  • http://origami.jubile.fr Jjdai Jjdaidai

    Bonjour
    I have 2 or more groups of div, and i want that the wole group 1 is closed but not the others.
    So I have add a little modif do close a group of div

    1- in the plugin i add the code between “//JJD begin modif” and “//JJD end modif” :
    ///////////////////////////////////////////////////
    // ShowHide plugin
    // Author: Ashley Ford – http://papermashup.com
    // Demo: Tutorial – http://papermashup.com/jquery-show-hide-plugin
    // Built: 19th August 2011
    ///////////////////////////////////////////////////

    (function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
    speed: 1000,
    easing: ”,
    changeText: 0,
    showText: ‘Show’,
    hideText: ‘Hide’

    };
    var options = $.extend(defaults, options);

    $(this).click(function () {

    $(‘.toggleDiv’).slideUp(options.speed, options.easing);
    // this var stores which button you’ve clicked
    var toggleClick = $(this);
    // this reads the rel attribute of the button to determine which div id to toggle
    var toggleDiv = $(this).attr(‘rel’);

    //JJD begin modif —————————————-
    //for hide groupe of div wz test id we are opening
    if(!$(toggleDiv).is(“:visible”))
    {
    var h = toggleDiv.indexOf(“-”); //search the root or id
    var group = “.” + toggleDiv.substring(1,h); //build the clas name
    $(group).slideUp(options.speed, options.easing); //close all the div whith the class name group
    }
    //JJD end modif —————————————-

    // here we toggle show/hide the correct div at the right speed and using which easing effect
    $(toggleDiv).slideToggle(options.speed, options.easing, function() {
    // this only fires once the animation is completed
    if(options.changeText==1){
    $(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
    }
    });

    return false;

    });

    };
    })(jQuery);

    2 – the attribut is building with many Id. Tthat is a string ===> root + “-” + id:
    exemple
    rel=”#colediteur-1>”>
    rel=”#colediteur-2>”>
    rel=”#colediteur-3>”>
    and
    rel=”#seealso-1>”>
    rel=”#seealso-2>”>
    rel=”#seealso-3>”>

    3 – I add a class in the div with the root of my id

    ” class=”colediteur”>
    ” class=”colediteur”>

    ” class=”seealso”>
    ” class=”seealso”>

    In this exemple the root of the first group is “colediteur” and the second “seealso”

    This run nice, each item of one group is closed when i open an item of one.
    If i close a “colediteur” only the groupe of div “colediteur” is closed.

    Sorry for my badly english and thanks for this pluggin
    JJDai

  • Rato Mirconi

    Thank you for sharing!

    Is it possible use a box (as a div) where you can click to show/hide rather than the text “Show” “Hide”?

  • Mardi

    Thank you for the tutorial!
    Question, when I load the page my divs are already open. How do I fix this?

    Also if I wanted each link/button to say something different when they are opened and closed how would I do this?
    E.g I need one link to say downstairs + when closed and downstairs – when opened. The I need another div to say upstairs + when closed and upstairs – when opened.

  • bala

    Hi friend, plz could you give me idea, how to move horizontal.

    Thanks,