In almost all of my projects, I have been using jQuery to toggle the layer. So, I thought of sharing how easy it is to expand div layer and collapse panel using jQuery. When user clicks on the header, the content gets displayed by sliding down and when you again click on the header, the content collapses.
Step 1:
Include jQuery Library in head section of your html file.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Step 2:
Come up with your own html elements in body section. I chose div ‘layer1′ to be the main container where collapsible/expandable content would reside.
Next, class ‘heading’ is given to header while div ‘content’ holds the show hide layer for that heading
Like this:
<div class="layer1"> <p class="heading">Header-1 </p> <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div> <p class="heading">Header-2</p> <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div> <p class="heading">Header-3</p> <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div>
Step 3:
CSS: Now it totally depends on you to write css for your heading, div. Here’s my version of CSS for this example.
.layer1 { margin: 0; padding: 0; width: 500px; } .heading { margin: 1px; color: #fff; padding: 3px 10px; cursor: pointer; position: relative; background-color:#c30; } .content { padding: 5px 10px; background-color:#fafafa; } p { padding: 5px 0; }
Step 4:
Again lets go to head section to add few more javascript codes.
<script type="text/javascript"> jQuery(document).ready(function() { jQuery(".content").hide(); //toggle the componenet with class msg_body jQuery(".heading").click(function() { jQuery(this).next(".content").slideToggle(500); }); }); </script>
Thats it!! Expandible-Collapsible panel is ready. You may like to view a DEMO.
breck
February 28, 2012
If I use partial postbacks with this control, how do I re-initialize the control?
I love it…until my user performs a partial postback (in this case, using ASP.NET updatepanel). After the partial postback, the control doesn’t work anymore.
How do I re-initialize it? I’ve tried executing the same code after the postback…doesn’t work, either in FF or in IE.
Thanks for any help.
Myles
February 28, 2012
Doesn’t work.
lol
Its the jquery code that fails!
Myles
February 28, 2012
RM my comment i fixed it!
Tom
March 3, 2012
Hi,
exactly what I was looking for – thank you!
wondering if it would be simple to extend this so that only one layer is open in the same time – opening one layer is closing the other opened layer?
and also: loading the content of the layer fist via ajax when expanding it?
Drew
March 6, 2012
Works like a charm. Thank you Anish!
Renée Picard
March 14, 2012
Bonjour
Comment mettre :
closedSign: ‘[+]‘,
openedSign: ‘[-]‘,
I want to put a + and a – in jquery headind and i do not know how?
Sorry for my bad english!
Thank you
RP
Nduh
April 3, 2012
plz help, what if u r using ASP.NET master pages. when your menu is with a class and a body on the other page with , plz email me so that i’ll forward screen shots of u don’t understand
Md. Rasel Ahmed
April 5, 2012
Really Nice…. Thank you :)
Carl Kelley
April 5, 2012
Thank you for you elegant solution and lucid presentation.
Opera
April 24, 2012
Thanks so much, this is perfect !