Web Development

(function ($) {
02	    $.fn.showHide = function (options) {
03	 
04	    //default vars for the plugin
05	        var defaults = {
06	            speed: 1000,
07	            easing: '',
08	            changeText: 0,
09	            showText: 'Show',
10	            hideText: 'Hide',
11	 
12	        };
13	        var options = $.extend(defaults, options);
14	 
15	        $(this).click(function () {
16	             // this var stores which button you've clicked
17	             var toggleClick = $(this);
18	             // this reads the rel attribute of the button to determine which div id to toggle
19	             var toggleDiv = $(this).attr('rel');
20	             // here we toggle show/hide the correct div at the right speed and using which easing effect
21	             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
22	             // this only fires once the animation is completed
23	             if(options.changeText==1){
24	             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
25	             }
26	              });
27	 
28	          return false;
29	 
30	        });
31	 
32	    };
33	})(jQuery);

$(document).ready(function(){
02	 
03	   $('.show_hide').showHide({
04	        speed: 1000,  // speed you want the toggle to happen
05	        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
06	        changeText: 1, // if you dont want the button text to change, set this to 0
07	        showText: 'View',// the button text to show when a div is closed
08	        hideText: 'Close' // the button text to show when a div is open
09	 
10	    });
11	 
12	});

01	<a href="#" class="show_hide" rel="#slidingDiv">View</a><br />
02	   <div id="slidingDiv" style="display:none;">
03	       Fill this space with really interesting content.
04	   </div>
05	 
06	<a href="#" class="show_hide" rel="#slidingDiv_2">View</a><br />
07	   <div id="slidingDiv_2" style="display:none;">
08	       Fill this space with really interesting content.
09	   </div>