Comments on: Basic AJAX Tutorial: jQuery toggle and slide

By: Andy

Andy — Tue, 28 Jun 2011 23:36:32 +0000

I’m having trouble getting this to toggle. Must have something to do with where the toggle link is placed. I’m getting the effect, but it only slides down. The div won’t slide back up–just keeps repeating the slide down. Any idea? Thanks.

By: web design

web design — Mon, 14 Feb 2011 16:18:16 +0000

nice post man…thanks for sharing this….

By: Dmitry

Dmitry — Thu, 14 Oct 2010 16:42:53 +0000

Very useful information, thank you.

By: Mike

Mike — Tue, 22 Jun 2010 17:32:57 +0000

Your post reminds me to my old post three years ago in which I encouraged people to use jQuery (you can read it here: http://tech.amikelive.com/node-22/7-reasons-to-use-jquery-as-the-javascript-framework-in-your-web-20-apps/)

It also seems that the div visibility issue is popular for jQuery users. When I read your example, I reflected to mine

Anyway, it’s nice to know how jQuery has been gaining more popularity these days.

By: shiva

shiva — Wed, 12 May 2010 13:19:59 +0000

Hi, thanks a lot, this is good exampls

By: HTML Fadein Fadeout: Basic Javascript/AJAX Tutorial using jQuery’s fadeTo | Sean Walther's Blog

Tue, 13 Apr 2010 16:24:41 +0000

[...] Basic AJAX Tutorial: jQuery toggle and slide – Includes AJAX definition, Introduction to jQuery [...]

By: seangw

seangw — Sat, 27 Feb 2010 13:49:49 +0000

I’m not sure what you are asking? Do you want to collapse items onclick? It sounds like something that would be both CSS and a bit of jQuery.

By: Roger

Roger — Fri, 26 Feb 2010 21:12:31 +0000

Is it possible to manipulate the Click here where when show it shows a – button and to show it shows a + button? Or would that be done via CSS?

By: Levi

Levi — Tue, 03 Nov 2009 22:27:52 +0000

Thanks! This helped me with a website.

By: Jeff Coughlin

Jeff Coughlin — Fri, 10 Jul 2009 02:13:04 +0000

Wouldn’t it be easier to just use the one line:
$(‘#toggleSection’).slideToggle(600);

instead of the multiple lines:
if ($(‘#toggleSection’).is(“:hidden”))
{
$(‘#toggleSection’).slideDown(“slow”);
} else {
$(‘#toggleSection’).slideUp(“slow”);
}

And Kung, try using the hide function (or just use CSS to preset display:none on the element)
$(‘#toggleSection’).hide();