5
How to expand collapse (toggle) div layer using jQuery
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.
118 Comments to “How to expand collapse (toggle) div layer using jQuery”
Leave a comment
Sign up for our mailing list.
Categories
Recent Comments
- Shankar on 8 Best WordPress Video Plugins
- Shankar on 5 Cool Video plugins for WordPress
- irshad on Creating Secure Login in PHP
- jaliya on How to refresh DIV using jquery
- anika on How to insert twitter updates in your webpage
How to expand collapse (toggle) div layer using jQuery | Design Gala http://bit.ly/2YmZQR (via @designgala)
How to expand collapse (toggle) div layer using jQuery | Design Gala http://bit.ly/2YmZQR (via @designgala)
How to expand collapse (toggle) div layer using jQuery http://bit.ly/2YmZQR (via @wprocker)
New Post: How to expand collapse (toggle) div layer using jQuery http://bit.ly/2YmZQR
How to expand collapse (toggle) div layer using jQuery: Quite often; in most of my projects, I have been using .. http://bit.ly/44WaPd
How to expand collapse (toggle) div layer using jQuery #jQuery http://j.mp/plGn3
Social comments and analytics for this post…
This post was mentioned on Twitter by wprocker: How to expand collapse (toggle) div layer using jQuery | Design Gala http://bit.ly/2YmZQR (via @designgala)…
Just what I as looking for on my wordpress blog. Worked perfectly! Many thanks for sharing.
You’re welcome. :)
Could you please tell me how to do expand collapse for nested divs and for n levels?
aa
Thank you ^^
Great post. Thank you for the code.
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
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.
RT @designgala: How to expand collapse (toggle) div layer using jQuery http://bit.ly/2YmZQR
One question, how would you make an expanded layer automatically close when the next layer is opened?
Also, a link at the bottom of the layer to close it would be useful on large single layers
Thank-you
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();
});
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.
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!!!
Could you provide the syntax to match your specific code above? I tried changing .cell to .heading and .cellExtra to .content. Also are we supposed to create a new class called .toggle that is hidden? Thanks!
Chris, I think you need to make changes in HTML part too.
how i toggle to up becoz right now its down… help me ahtsham.com
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!
So nice, clean and simple, thanks! My Worpdress sidebar is now full of exandable / collapsible content ares :D
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.
Great post. Thank you for the help.
http://www.designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/
How to expand collapse (toggle) div layer using jQuery http://icio.us/dndn01
Working great ..! Thanks a lot ..
RT @designgala: How to expand collapse (toggle) div layer using jQuery http://is.gd/dATAh
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.
the problem is solved.any way thanks for such a helpful post.
[...] Show/Hide any div box with jQuery in WordPress More Showing, More Hiding Assorted built-in jQuery show/hide effects Simple Jquery Show/Hide Div How to Expand / Collapse Latest Posts or Archives How to expand collapse (toggle) div layer using jQuery [...]
I will use this in my new drupal site. Thank you for the code.
How to expand collapse (toggle) div layer using jQuery http://ow.ly/1a69AN
RT @del_javascript: How to expand collapse (toggle) div layer using jQuery http://ow.ly/1a69AN
Div com toggle personalisado http://bit.ly/cQXQqU #Jquery.Muitos usam para blogs wordpress #wordpress
Div com toggle personalisado http://bit.ly/cQXQqU #Jquery.Muitos usam para blogs #wordpress
thanks for your expand/collapse, it saved my time…
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 :-)
Hi Alison – did you ever find a way of getting this functionality? I need to do the same thing – link to content inside one of the hidden divs from another page, but am very stuck! Thanks!!!
Claire =^.^=
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?
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!
Super i like it
thank you
[...] (Originally found over at designgala.com) [...]
This is a great post. I love how simple jQuery is.. very useful
RT @designgala: How to expand collapse (toggle) div layer using jQuery http://is.gd/dATAh
RT @designgala: How to expand collapse (toggle) div layer using jQuery http://is.gd/dATAh
Thanks a WHOLE bunch! It works beautifully.
I just haven’t a clue as to how you get the + and – on there?
Wow! This was great!! I love how easy it was to do. I am just learning javascript, CSS, etc. and I was actually able to understand what each sections purpose was. :-) One small step closer to becoming a web designer! lol I am also curious how to do the + and – so they change when it is clicked. Thank you again!
thanks ! it’s work right ! thanks !
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 !
[...] DesignGala.com This entry was posted in Blog. Bookmark the permalink. ← Hur får man klientens [...]
How to expand collapse (toggle) div layer using jQuery: http://bit.ly/hZn0f2
Thanks a lot!!. It solve my problem.
[...] How to expand collapse (toggle) div layer using jQuery [...]
Thank you for the tutorial!
twas’ of great help :)
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?
exactly what i needed. built this into a project in less than 10 minutes.
brilliant!
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.
If i need 2 (or more) divs of Content under the Heading which should be hide/shown? Thenks!
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
hi richards, great post. i have a pressing question though. how do i integrate this code seemlessly into my wordpress blog post? pls reply
[...] i try to use the following tutorial How to expand collapse (toggle) div layer using jQuery [...]
Danke für diesen Tipp! Hat auf Anhieb geklappt! Ich bin mit dieser Lösung sehr zufrieden!
Wann klappt schon mal was auf Anhieb beim Webdesign? :)
Liebe Grüße und Danke!
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?
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.
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
I hear a simple “nudge” of the window will trigger them off. scroll up or down 1 px then back to nudge the screen and the scroll bar will disappear.
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
Hey, is it possible to add a second link at the top of the page that will expand the div?
Works like a charm, happens to work even with the WordPress qTranslate plugin which itself shows/hides html. Yay!
Nice
and I would like to hear updates of jquery topics through mail
THANNK YOU FINALLY I FOUND AN EASY WORKING TUTORIAL.
Thanks you so much. It was really easy and simple! :)
Thanks alot for this, was exactly what i was looking for.
great ideas which is very helpful like me :)
great, I love it, but on longer content (height) towards the bottom the smooth goes jerky and jumps to the end!
How do you fix this? Any help email me :] :]
Got it, I set the width on the .content!
(encase anyone else has the same problem)
Great code!
Thank you so much! It’s just what I was looking for.
How do I disable the click when it has expanded?
Great, just what I was looking for and so easy to implement!
Works great! Thank you for this tutorial.
[...] http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/ Like this:LikeBe the first to like this post. [...]
Thanks i was searching the same thing
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.
Doesn’t work.
lol
Its the jquery code that fails!
Even though this article is old, it still worked for me great! Thanks!!
RM my comment i fixed it!
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?
Works like a charm. Thank you Anish!
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
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
Really Nice…. Thank you :)
Thank you for you elegant solution and lucid presentation.
[...] Here is a link to a Twitter jQuery Demo. Here is a link to a Toggle DIV using jQuery Demo. [...]
Thanks so much, this is perfect !
Your page appeared first on Google when I searched for jQuery Expand Collapse div….
It took only 5 mins for me to integrate it in my project
No wonder why your post appears first ,….. it deserves….
Thanks
Anyone got any ideas of how to add a ‘close’ link within the content so the viewer doesn’t have to scroll to the top to close the header?
I need some modification in the script but could not do it as i am not so friendly with jquery
When the page postback i want to maintain the state of the panels. Right now if i refresh the page all the panels are collapsed,
i am using the below code
$(document).ready(function () {
$(“DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand”).toggle(
function () {
$(this).parent().next(“div.Content”).show(“slow”);
$(this).attr(“class”, “ArrowClose”);
},
function () {
$(this).parent().next(“div.Content”).hide(“slow”);
$(this).attr(“class”, “ArrowExpand”);
});
});
Very cool. Thanks for posting this. It’s one of the simpler methods of doing the accordion and it’s very flexible. Thanks again!
very good and easy demo, like having lunch in breakfast ;)
i just want to ask how to store the value of the div which is openend during postback ?
Brilliant! Very simple and much needed code!
Thanks a LOT!!
Amazing tutorial. I was able to make the tutorial work with my design elements in about 25 minutes. A couple of errors on my part but the div expands and collapses now. Brilliant!
I have to click the header three times before it expands or collapses any idea why? Here is my code:
$(document).ready(function () {
$(“.msg_body”).hide();
$(“.msg_head”).toggle(function () {
$(this).next(“.msg_body”).slideDown(100);
}, function () {
$(this).next(“.msg_body”).slideUp(300);
}, function () {
$(this).next(“.msg_body_info”).slideDown(100);
}, function () {
$(this).next(“.msg_body_info”).slideUp(300);
});
$(this).(“.msg_body_info”).slideDown(100);
});
Excellent script – easy to implement A+
wanted to have one div drop down showing – so added this to head and created two more css class’ one for opencontent and one for openheading
jQuery(document).ready(function() {
jQuery(“.opencontent”).show();
//toggle the componenet with class msg_body
jQuery(“.openheading”).click(function()
{
jQuery(this).next(“.opencontent”).slideToggle(500);
});
});
It works, but is this the correct way to do it?
Awesome…
Thanks a lot.. This saves my time
Brilliant tutorial with clear instructions. I’m a newbie to CSS and Javescript, but it only took me a few mins to put it in my page.
Thanks
Hi – can you add a Expand/Collapse all to this code? How do I do it?
Hi! i find the tutorial and the demo very esplicative!
I was trying the code in a (FF)GreaseMonkey project i’m working on, but i’m getting constantly an error message: “jQuery is not defined”.
I get the same even after the add of .noConflict() method (just in case).
Not sure why it’s not working on me.
Any suggestions?
Excellent example. Great job.
Great. It just works. Thanks for not making the directions messy.
Thanks. It works great. Exactly what i am looking for.
Hi,
I am also using jquary in Sharepoint. Its working fine,when i am using in Dreamwiver.
But when i implement the same code on Sharepoint its generating some code or Id that i don’t know..like jquery1356717204441=”3″ ,jquery1356717204441=”7″ etc.If anybody have an idea about this.Please send me the the resolution on my email-id – munish.gumber.029@gmail.com .