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
		     $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);

		  return false;



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.


		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




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>
 <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>


More tutorials from Papermashup
  • Chris

    Hello, I have a few questions in regards –

    Once one anchor is clicked and active, and then the next anchor is clicked how can we have the previous active toggle div close instead of staying open.

    Also when replacing the text when the div is open is great but how to make it so when we click “close” on the active anchor it goes back to the default instead of switching it “show” text.

    Thanks in advance hope this is understandable and you may be able to help.

  • Kevin

    How can I close the previous div when I go ahead and click on another link? Since I don’t want all of them to be expanded all at once.



  • Diego

    Ashley, one question: There is any way to configurate this to show one div and hide the another ones, like a frame? Did you get it?
    Thanks for the plugin!

  • Devon Gilchrist

    I’m echoing Matt… IE7 not working and would love to use this code. Thanks!

  • Simeon

    Hello there! What about the xhtml rule that does not allow “div” nested in “a”?
    I am not so experienced so i just ask?
    Thank you.

  • Andy

    oops, i tried creating css class instead of id earlier and it didn’t worked and tried again today and it worked. Probably bcos of caching issue. So it’s all great. Thanks for a great sript. I have added jquery pagination to it and it works like a charm. :)

  • Matt


    This doesn’t seem to work in IE7, I have tested your demo on IE7 and it doesn’t work, any ideas, as I really like this script.


  • Andy

    Thanks for this plugin Ashley.


    Fill this space with really interesting content.

    As per the code above, for each button and div, I need to add unique rel attribute and div id.

    As these buttons and div will be created on the fly (dynamically), it’s easy enough to set up a php script to generate these unique ids and echo it , instead of manually typing slidingDiv under rel and div id.

    But how do i add these IDs properties in css dynamically?

    In your css, you have #slidingDiv, #slidingDiv_2,#slidingDiv_3 but what if these ids are generated dynamically?

  • Sag-e-Attar Junaid Atari

    Great, Thats what I was looking for. You rocked the jQuery.

  • Mia

    Love it ! The easing effect is what makes this plugin rock over a few other plugins of its kind whereas : they simply either expand or drop down without any transitional effect .
    Great one Ashley :)

    BTW : Any plans on creating a WP Plugin out of this ? Would be sweet.

    Cheers :)