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
Comments
156 discussions around jQuery Show / Hide Plugin
Newer Comments
  1. Chris says:

    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.

  2. Kevin says:

    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.

    Thanks,

    Kev

  3. Diego says:

    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!

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

  5. Simeon says:

    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.

  6. Andy says:

    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. :)

  7. Matt says:

    Hi

    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.

    Cheers

  8. Andy says:

    Thanks for this plugin Ashley.

    View

    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?

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

  10. Mia says:

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

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.