Hey! How do I get these to stay collapsed on load? They are all open when the page loads

I’m trying to replace the add and hide text with images, but It won’t work. How can this be done?

Where do I put the code from the section ‘The Usage’?
In the qs file or somewhere in the website?

Sorry, no experience with adding JQueries at all…

Thanks!

Thanks for making this script available. You saved me a lot of time! Any easy way to make this work on mouseover instead of click?

Thanks again!

I’ve been trying to implement this on my site for a couple of days now but I still have the problem that when a div is opened, I can switch between divs without problem but i can’t close all the divs. It just bounces back.

I’ve read through the comments several times but none of the fixes have worked. Could somebody please post the full javascript file so I know I’m not making any mistakes?

Any help appreciated

Hi there, thanks so much for the plugin, it helped me a lot!
I have a question, is there a way to substitute the ‘hide / close’ texts for images?

Very cool code, and perfect timing for me. I’m working on a project that this code is perfect for and in a couple of weeks I start a new term at Clark College with a JavaScript and JQuery class. So, making this work is great practice for the coming class.

However, it’s giving me problems that I’m unable to resolve.

Ideally what I want is to toggle the display of a Div with the added feature that when I display a new Div the previously open Div closes without having to hit the Hide button.

The first problem I ran into is similar to the issue that Derek talks about — immediately reopening when clicking Hide. If I click on a new Div, the previous one closes and the new one opens. Great! However, the label doesn’t change from Hide to View. If I open each Div, one after another, there will only be one Div open and all of the labels say Hide. Also, if I click on Hide for an opne Div, it opens again immediately after closing.

If I try Mikael’s suggestion and change the line to:
$(‘.toggleDiv:hidden’).slideUp(options.speed, options.easing);
It no longer auto-opens, but now I will have multiple Divs open. So that fix breaks the ony-one-Div-at-a-time goal.

I next tried another Mikael suggestion and removed the previous fix and added this line:
$(toggleDiv).is(':visible') ? $('.toggleDiv').slideUp(options.speed, options.easing) :
Now only one Div is open at a time, and it no longer auto-opens, but the label is stuck on Hide.

Any thoughts on how to fix the label issue without breaking the other features?

Here is the current version of my code:

$(this).click(function () {	
	// optionally add the class .toggleDiv to each div you want to automatically close
	$('.toggleDiv').slideUp(options.speed, options.easing);
	//$('.toggleDiv:hidden').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).is(':visible') ? $('.toggleDiv').slideUp(options.speed, options.easing) : 
	$(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);
	}
});

Here is the trick:

        $(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).is(":visible") ? $('.toggleDiv').slideUp(options.speed, options.easing) : $(toggleDiv).slideToggle(options.speed, options.easing, function() {
		     // this only fires once the animation is completed
			 if(options.changeText==1){
		     $(toggleDiv).is(":visible") ? toggleClick.html(options.hideText) : toggleClick.text(options.showText);
			 }
              });

Hi
thanks for the plugging.

I’ve corrected the line that close the other div when clicking, it didn’t work well since if you click twice on your link, the second time will hide than show…

here is my modification:

$(‘.toggleDiv:hidden’).slideUp(options.speed, options.easing);

best

mikael

Here is another version that works more like a carousel

(function ($)
{
$.fn.showHide = function (options)
{
//default vars for the plugin
var defaults =
{
speed: 1000,
easing: ”,
changeText: 0,
showText: ‘View’,
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 );
$(‘.show_hide’).text( options.showText );

// 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
if( $(toggleDiv).is(“:visible”))
{
$(toggleDiv).slideUp( options.speed, options.easing);
if(options.changeText == 1)
{
toggleClick.text(options.showText);
}
}
else
{
$(toggleDiv).slideDown( options.speed, options.easing );
if(options.changeText == 1)
{
toggleClick.text(options.hideText);
}
}

return false;
});
};
})(jQuery);

//var $k = jQuery.noConflict();
$(document).ready(function()
{
$(‘.show_hide’).showHide(
{
speed: 1000, // speed you want the toggle to happen
easing: ”, // the animation effect you want. Remove this line if you dont want an effect and if you haven’t included jQuery UI
changeText: 1, // if you dont want the button text to change, set this to 0
showText: ‘View’,// the button text to show when a div is closed
hideText: ‘Close’ // the button text to show when a div is open
});
});

.toggleDiv
{
height: 300px;
background-color: #99CCFF;
padding: 20px;
margin-top: 10px;
border-bottom: 5px solid #3399FF;
}

View
Fill this space with really interesting content.

View
Fill this space with really interesting content.

[\code]

Please Help! I need a reply in the next 24hours, Is it possible to close one div if it is already open as another opens, Please Reply! I’m new to js! Gregg

Hi Dave am trying to display an image instead of text but doesnt seems to be working. I have set text to html in my js
$(toggleDiv).is(“:visible”) ? toggleClick.html(options.hideText) : toggleClick.html(options.showText);

and in my html i have this
showText: ”,
hideText: ‘Hide Content’

but this is not working can you explain