Comments on: Collapsible Panel

By: JF

JF — Fri, 02 Dec 2011 19:19:35 +0000

THANK YOU!!!

Not a designer by any margin and I had been looking for a simple panel for the last little while.

This is exactly it!

By: Iyan

Iyan — Thu, 13 Oct 2011 09:54:02 +0000

It turns out I was searching for something like your collapsible side panel. Nice and elegant design!

By: Den

Den — Wed, 10 Aug 2011 05:41:45 +0000

This is so goodl. where can I download the resources? (e.g. general.js, reset.css) =)

By: Mandar

Mandar — Sat, 02 Jul 2011 09:28:53 +0000

Hi Elio

First of all a big big thanks to you for providing such a wonderful code and then the support to it as well. Many Thanks for this.

However if would like if you can throw some light on why does the code not work in IE? It works fine for “Hide Panel” but stops working for “Show Panel”. You can check the code at dentpro.co.in/panel

Thanks in advance. And once again congratulations for a good tutorial.

Cheers
Mandar

By: Elio

Elio — Tue, 14 Jun 2011 18:00:11 +0000

Karen, this code can be easily adapted to slide over the content. In the css, remove the margin-left for #colright and add position: absolute; for #colleft. Then in the JavaScript, remove the code that operates on #colright and the panel will now slide over the content. Of course, you’ll have to make additional tweaks to fit your own specific code.

By: Karen

Karen — Tue, 14 Jun 2011 09:00:50 +0000

Great tutorial, thanks!

However…I can’t find a solution anywhere on the web – maybe I’m using the wrong search words, I don’t know. I want the panel to slide over the content, not to push it to the side. I’ve tried z-indexing divs but that doesn’t work, and I’m really out of my depth here.

By: silvith

silvith — Tue, 14 Jun 2011 07:43:33 +0000

Very clear and useful tutorial, thanks very much

By: scott

scott — Sat, 19 Mar 2011 21:01:04 +0000

hey!

awesome demo. really has helped me with the sliding panels, as there aren’t many around.

quick question – how would I go about manipulating the code so I could toggle the arrow as both the open and close button?

this post is definitely helping me get my site off the ground!

By: vishal rughani

vishal rughani — Wed, 16 Mar 2011 06:42:22 +0000

that was Superb
but i want to Display 4 different panel where i want that panel inside a table (tr consists of 2 panel)

By: Elio

Elio — Wed, 16 Mar 2011 02:44:30 +0000

Actually, animating it from the bottom is simpler than doing it from the sides. I’ll try to write a tutorial later, but you might want to check out http://graphicsnippets.com/
For each thumbnail there’s a block that slides up but it’s actually done with slideDown from jQuery! The idea is to have an element fixed at the bottom. The slideDown then enlarges it downwards, but since its position is fixed at the bottom it will appear to move upwards.