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.
Richard
February 18, 2010
Just what I as looking for on my wordpress blog. Worked perfectly! Many thanks for sharing.
Anish Blon
February 18, 2010
You’re welcome. :)
Rekha
April 12, 2011
Could you please tell me how to do expand collapse for nested divs and for n levels?
John Travertine
March 3, 2010
Great post. Thank you for the code.
Colin Callahan
March 11, 2010
I love when I can take some code and paste it into an html file and it works right off. Then I can play with it to make it do what I need. I tried a few others and they didn’t work. Thanks for the simple and complete code.
Colin
Lenton
March 18, 2010
Many thanks for the well written code. Yours is the first example of an expand/collapse div that actually worked with more than one div.
Richard
April 3, 2010
One question, how would you make an expanded layer automatically close when the next layer is opened?
Richard
April 3, 2010
Also, a link at the bottom of the layer to close it would be useful on large single layers
Thank-you
tyler
March 5, 2011
Hey Richard, this is done through the addClass() method:
$(“.cell”).click(function() {
var kid = $(this).children(“.cellExtra”);
var dad = $(this).parent();
var toggledKid = $(dad).find(‘.toggle’);
$(toggledKid).hide().removeClass(‘toggle’);
$(kid).addClass(“toggle”).show();
});
alan
April 13, 2011
Hello, I a bit new to this so could you pls explain where this code goes so that expanded layer automatically close when the next layer is opened?
Thank you very much for your help.
James
May 8, 2011
Please elaborate on this more as I’m a bit confused on how to implement this (I’d like it to ‘slide closed’ when another one is clicked.
Currently, I’m just adding the line
jQuery(“.content”).hide();
right above, jQuery(this).next(“.contentx”).slideToggle(500);
and it works, but it’s not ‘appealing’ visually.
Also, any chance you could explain how to make an ‘expand all’ button that would expand all ‘content’s with one click?
Thank you!!!
ahtsham
April 22, 2010
how i toggle to up becoz right now its down… help me ahtsham.com
Judie
April 29, 2010
I am using the words “show more” prior to toggling down. How would you have the words change to “show less” once the full content is shown? Thank you for the great script!
Tim
June 2, 2010
So nice, clean and simple, thanks! My Worpdress sidebar is now full of exandable / collapsible content ares :D
Nathanael
July 5, 2010
You are an absolute legend, im using text pattern for building my website and its taken me an age trying different codes to make this work with textpattern. yours has been the only one so far which works perfectly (bar the few adjustments) cheers man.
Raghib suleman
July 16, 2010
Great post. Thank you for the help.
srikanth
August 3, 2010
Working great ..! Thanks a lot ..
sprajapati
September 24, 2010
What i want is that when ever the header is clicked it displays the contents from the database.can we do that?combining php and jquery.so,will please help me.hope for positive response.
sprajapati
September 26, 2010
the problem is solved.any way thanks for such a helpful post.
Israel Travel
November 8, 2010
I will use this in my new drupal site. Thank you for the code.
Alison
December 1, 2010
Could you please tell me how to link to an anchor within the collapsed div that will make it expand? So, further up the page, I have some text with a link to #anchor – the anchor link is further down the page within the collapsed content. When somebody clicks the text link I want it to expand the collapsed content AND go to that spot. Can that be done?
Otherwise – awesome, works really well :-)
question
December 4, 2010
Is there a way to save that state?
ie, if someone expands the middle bar, refreshes the page, the middle bar will still be expanded?
Seluna
January 8, 2011
I’ve been trying out several show/toggle and this worked for me exactly how I want it and with minimal fuss. Thank you for sharing!
sumesh
January 20, 2011
Super i like it
bowwy
January 29, 2011
thank you
Aaron Vail
February 19, 2011
This is a great post. I love how simple jQuery is.. very useful
JOe
March 10, 2011
Thanks a WHOLE bunch! It works beautifully.
I just haven’t a clue as to how you get the + and – on there?
Paulo Henrique
April 5, 2011
Hello there, do you know if it is possible to keep the toggle hide when the page is loading ? Because it suddenly appears and desapears on loading. Do you know a way to avoid this ?
Thx in advance !
Bhuvan
May 18, 2011
Thanks a lot!!. It solve my problem.
rohan SIngh
June 24, 2011
Thank you for the tutorial!
twas’ of great help :)
NTD
July 5, 2011
bravo, nice work, very easy to implement. how do you do the whole + or – next in the p class-header based on whether it is expanded or not?
SIFE
July 10, 2011
I have a little problem about collapsing div menu, I have this piece of jQuery:
$(“.options”).slideUp();
$(‘.menu_head’).toggle(function() {
$(“.options”).slideUp();
$(this).next(‘div’).slideDown();
}, function() {
$(this).next(‘div’).slideUp();
});
This is allow me to open one menu, and others will be hidden automatically, the prblem I face now is if click on element in the menu, the whole menu will be slide up, how I can fix this.
Annika
October 10, 2011
this was very useful! thank you! I am just wondering if there’s a way to style the “active” .heading using css? for example, when i click on a heading, I want that heading to stand out from the other headings…. thanks for any help
Yogesh Gandhi
November 10, 2011
Thanks for the wonderful tutorial.
but I was trying to integerate this with my blogger.
But it is not working there…..my blog just goes blank….
Couldn’t figure out the reason..
The moment I write $(“.content”).hide();
IT breaks !!
Can you please help?
Yogesh Gandhi
November 10, 2011
Thanks to my friend jashwant, who helped me figure out the problem while implementing this on blog.
The problem was the the content class was already being used in my blog.
I changed the name of the class and it worked.
jenny
November 11, 2011
hi, it just worked fine :)……but then shows a scrolls bar , once it shrinks back…..i dont want that scroll bar….how to overcome ?this
Nirav Bhavsar
November 15, 2011
I need to impliment facility to expand all and collapse all in above given example. so is any script which works here.p
if possible then give me script.
Thanks