Snippi

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