Toggle Blind Effect

Question

Is there a way to alter this script to be used as the blind effect.

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='';
var hideText='';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

FYI-
Where it says:
var showText='';
var hideText='';

It was originally:
var showText='Show';
var hideText='Hide';

I deleted the Show/Hide Text because I am applying the link to different areas of text. I like the Blind effect, vs. this Toggle effect, and need to know how to apply it, if possible. I cannot find a basic Blind effect script that allows the use of applying the link to ANY text, vs. a button or static text.

Thanks! Hope you can help! Tracy

Answer 1

I seemed to have figured it out, DUH! By changing 1 word in the following line:

$(this).parent().next('.toggle').toggle('slow');

Changed to this:

$(this).parent().next('.toggle').slideToggle('slow');

Simply changed:
.toggle to .slideToggle

I also deleted the unneeded lines completely:

var showText='';
var hideText='';

Which originally said:

var showText='Show';
var hideText='Hide';

because I wanted to apply the link to activate the hidden DIV to various text.

Also deleted the other line associated with this:

$('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>');

Back to making this a Sliding effect [Straight slide down/up vs. coming in/out from top/left corner]: After I figure out that changing .toggle to .slideToggle did the trick, I then replaced the line to read:

$(this).parent().next('.toggle').animate({"height": "toggle"},{duration: 1000});

instead of:

$(this).parent().next('.toggle').slideToggle('slow');

Now I have control over the speed, which makes for a smoother slide.

For the HTML, simply apply a class "toggleLink" to any link with the href="#". For the hidden DIV, apply the class "toggle".