• 1.
    (function ($) {
  • 2.
        $.fn.showHide = function (options) {
  • 3.
     
  • 4.
        //default vars for the plugin
  • 5.
            var defaults = {
  • 6.
                speed: 1000,
  • 7.
                easing: '',
  • 8.
                changeText: 0,
  • 9.
                showText: 'Show',
  • 10.
                hideText: 'Hide'
  • 11.
     
  • 12.
            };
  • 13.
            var options = $.extend(defaults, options);
  • 14.
     
  • 15.
            $(this).click(function () {
  • 16.
    // optionally add the class .toggleDiv to each div you want to automatically close
  • 17.
                          $('.toggleDiv').slideUp(options.speed, options.easing);
  • 18.
                 // this var stores which button you've clicked
  • 19.
                 var toggleClick = $(this);
  • 20.
                 // this reads the rel attribute of the button to determine which div id to toggle
  • 21.
                 var toggleDiv = $(this).attr('rel');
  • 22.
                 // here we toggle show/hide the correct div at the right speed and using which easing effect
  • 23.
                 $(toggleDiv).slideToggle(options.speed, options.easing, function() {
  • 24.
                 // this only fires once the animation is completed
  • 25.
                 if(options.changeText==1){
  • 26.
                 $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
  • 27.
                 }
  • 28.
                  });
  • 29.
     
  • 30.
              return false;
  • 31.
     
  • 32.
            });
  • 33.
     
  • 34.
        };
  • 35.
    })(jQuery);
(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);

Copy Code to Clipboard Raw

Sign-in or Create a Free Account.

Snippi uses Twitter or Facebook to register and create accounts. Registration will enable you to keep track of your snippets. We never spam your timeline or wall. Ever.

Sign-in with Facebook Sign-in with Twitter