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.
plugin
(function ($) {
02 $.fn.showHide = function (options) {
03
04
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
17 var toggleClick = $(this);
18
19 var toggleDiv = $(this).attr('rel');
20
21 $(toggleDiv).slideToggle(options.speed, options.easing, function() {
22
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);
The usage
$(document).ready(function(){
02
03 $('.show_hide').showHide({
04 speed: 1000,
05 easing: '',
06 changeText: 1,
07 showText: 'View',
08 hideText: 'Close'
09
10 });
11
12 });
HTML
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>
CSS
<style>
body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}
#slidingDiv, #slidingDiv_2{
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
display:none;
}
</style>
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?
Thanks