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.
13 Comments
Trackbacks
- WordPress Rocker
- raulblon
- Anish Lama
- Design Gala
- Design Gala
- jQuery Tips
- uberVU - social comments
- Pieter Kubben
- Nisha
- Nisha
- Maurizio Stasi
Just what I as looking for on my wordpress blog. Worked perfectly! Many thanks for sharing.
You’re welcome. :)
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.
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
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.
Working great ..! Thanks a lot ..