Click here to Skip to main content
15,881,967 members
Please Sign up or sign in to vote.
1.50/5 (2 votes)
I am trying to implement jQuery Show / Hide Plugin

I have tried enough to rectify the problem, but it doesn't work on IE6, where as it works like a charm on other browsers.


(function ($) {
02	    $.fn.showHide = function (options) {
04	    //default vars for the plugin
05	        var defaults = {
06	            speed: 1000,
07	            easing: '',
08	            changeText: 0,
09	            showText: 'Show',
10	            hideText: 'Hide',
12	        };
13	        var options = $.extend(defaults, options);
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	              });
28	          return false;
30	        });
32	    };
33	})(jQuery);

The usage

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
10	    });
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>
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>



font-family:Verdana, Geneva, sans-serif;

#slidingDiv, #slidingDiv_2{
	background-color: #99CCFF;
	border-bottom:5px solid #3399FF;


If i change the display to block - it displays the content all the time and doesn't display when button is clicked or hide it when the button is clicked.
I think it's a css issue than anything else..

Any ideas to fix this annoying issue?

Updated 21-Oct-11 6:40am
Manfred Rudolf Bihy 21-Oct-11 9:19am    
Just out of curiosity: There really still are IE6 installations out there? It's been almost two years since I did a query server analysis of our IIS log files and there was only a small percentage of IE6 browsers recorded back then (<3%). Do you know how large that percentage is for the website you're developing?
Dylan Morley 21-Oct-11 9:33am    
Comment from OP:

The latest stats says that we still have around 15% users (approx 6500) who are using IE6. I don't understand why people still use it, I think it's more hard work to not install update than to install it. It's such a pain.
AndyInUK 21-Oct-11 9:41am    
Thanks Dylan, New to questions and answers section :)
Sergey Alexandrovich Kryukov 21-Oct-11 13:18pm    
This 15% won't help you anyway, but you will help the world by stopping to support IE6, the wide movement embraced by whole world including Microsoft.
Sergey Alexandrovich Kryukov 21-Oct-11 13:10pm    
Why do you think you need to support IE6?

1 solution

Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900