Comments on: Expand-collapse toggle panel (div) using jquery

By: Rodrigo

Rodrigo — Sun, 07 Feb 2010 00:58:55 +0000

Roshan, i love your code, tell me, can i put blogger widgets inside?
like:

Header-1

ONE WIDGET HERE!

Header-2

ANOTHER WIDGET HERE.

Header-3

PLEASE, ONCE MORE HERE!

ps. sorry about my bad english…

By: cryx

cryx — Fri, 05 Feb 2010 09:29:49 +0000

And oh, I saw that I’ve written without “.” on the other divs, well I tried that and same problem.

By: kaf

kaf — Wed, 27 Jan 2010 02:15:53 +0000

Very simple and fantastic piece of code.
I am a newbie to jquery. Is there a way of loading the msg_body from a text or php file using ajax.

Thanks

By: pligg.com

pligg.com — Thu, 17 Dec 2009 21:02:42 +0000

Expand-collapse toggle panel (div) using jquery…

In this post, I’ll show you how easy it is to show expandable and collapsible toggle panel using jQuery. When you click on the heading, the content gets displayed by sliding and when you again click on the heading again, it gets collapsed…

By: Yep

Yep — Mon, 02 Nov 2009 23:29:45 +0000

This is great, simple, easy right to the point. Ben there are about 12% of users, today, using IE 6, what an unfortunate circumstance that really is, however, the percentage of users keep dropping quickly.

By: Eyal

Eyal — Sun, 01 Nov 2009 18:24:01 +0000

Hi, awesome example thank you.

I’m trying to make this work inside a table, where clicking a title row will open up a description row under it, but once you put the DIV inside a TD, the whole thing doesn’t work…

Any ideas? thank you

By: Jaime

Jaime — Wed, 21 Oct 2009 11:19:34 +0000

this is better

$(document).ready(function(){
$(“.msg_body”).hide();
$(“.msg_head”).click(function(){
$(this).next(“.msg_body”).slideToggle(“normal”);
});
});

By: fee

fee — Tue, 13 Oct 2009 16:33:07 +0000

@Ben Frain,

have you even tried this in IE6 because it works perfect for me in IE6

By: Ben Frain

Ben Frain — Fri, 09 Oct 2009 00:03:41 +0000

Unfortunately, whilst this is simple and easy to setup for IE 7 & 8 it is not compatible with Internet Explorer 6. I realise IE 6 is a worthless piece of crap but sadly, many people are still using it. Have you considered tweaking the code to work on IE6?

By: Expand-collapse toggle panel (div) using jquery | jquery toggle | My Web Development Bookmarks

Mon, 05 Oct 2009 10:50:05 +0000

[...] Visit link: Expand-collapse toggle panel (div) using jquery | jquery toggle [...]

By: Noor

Noor — Thu, 01 Oct 2009 09:52:44 +0000

Hi,

I want to add two links at the top which will say “Collaps all” and “Expand All”. Please can anybody provide me the additional code for it?

Thanks,

By: Chad Sharpe

Chad Sharpe — Fri, 25 Sep 2009 06:26:35 +0000

thanks for this, it works great! this remixed code allows only one open .body open at a time…

$(document).ready(function(){
//hide the all of the element with class msg_body
$(“.body”).hide();
//toggle the componenet with class msg_body
$(“.head”).click(function(){
if ( $(this).next(“.body”).is(‘:visible’) ) {
$(“.body”).hide();
} else {
$(“.body”).hide();
$(this).next(“.body”).slideToggle(250);
}
});
});

By: Plvkas

Plvkas — Mon, 03 Aug 2009 06:37:23 +0000

Hi,
I have the div tag to be collapsed under a asp update panel(ajax), after the update panel is updated the div is not collapsing. I tried debugging it but the click event itself does not fire.
Please help me.

By: IT Freak

IT Freak — Sun, 02 Aug 2009 10:40:09 +0000

Nice one. Thanks for the share.

By: Oscar

Oscar — Mon, 27 Jul 2009 15:29:18 +0000

..sorry about later post misprints, I mean:
$(”.div1,.div2,.div3″).hide();
If you design your project with more calm then you could add a generic class for all your collapsible DIVs (

…,

…); then you can try something more concise like:
$(”.collapsible”).hide();