Copyright (c) 2013 Karthik Ananthapadmanaban Dual licensed under the MIT and GPL licenses. http://docs.jquery.com/License
Date: 02-27-2013
Intro:
Partial collapsible panel is a jquery plugin that is similar to ajax control toolkit's CollapsiblePanelExtender. There are few plugins that does something similar to that, but they do not deal with partially collapsed panels.
[update] An update as of 3/18/2012. I have released v2 of this plugin. in case you intend to have an image in the header, you no longer have to have an tag anymore. You just have to set the enableHeaderImage property and specify the expandedImageUrl and collapsedImageUrl urls.
[update] As of 2/27/2013, Checking this in to github.
How to use it?
Okay, how do you use it in your projects? Here you go, it's just a few steps.
Include the css required
<style type="text/css">
.cpHeader
{
background-color: #6A6A6A;
border: solid 1px #6A6A6A;
width: 450px;
color: White;
}
.cpContent
{
background-color: #dadada;
border:1px solid #6A6A6A;
width: 450px;
color: Black;
}
</style>Include jquery and partial collapsible panel javascript files
<script type="text/javascript" language="javascript" src="jquery.min.js" />
<script type="text/javascript" language="javascript" src="partial-collapsible-panel.minified.js" />Following is an example section that you could apply this plugin
<div class="cpHeader">
Lorem Ipsum
</div>
<div class="cpContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis justo nec ante facilisis aliquam. Nam vitae sem est. Nam at tristique tortor. Maecenas non risus nulla.
Curabitur libero metus, laoreet nec ultricies id, commodo vitae felis. Curabitur interdum commodo hendrerit. Suspendisse sit amet eros nulla. Donec faucibus posuere libero. Nunc
laoreet leo et justo lobortis eu placerat metus bibendum. In consequat urna ut nibh dapibus a euismod erat consectetur. Aliquam in pharetra lorem. Integer ac arcu nec ante pharetra
dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis justo nec ante facilisis aliquam. Nam vitae sem est. Nam at tristique tortor. Maecenas non risus nulla.
Curabitur libero metus, laoreet nec ultricies id, commodo vitae felis. Curabitur interdum commodo hendrerit. Suspendisse sit amet eros nulla. Donec faucibus posuere libero. Nunc
laoreet leo et justo lobortis eu placerat metus bibendum. In consequat urna ut nibh dapibus a euismod erat consectetur. Aliquam in pharetra lorem. Integer ac arcu nec ante pharetra
dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis justo nec ante facilisis aliquam. Nam vitae sem est. Nam at tristique tortor. Maecenas non risus nulla.
</div>Finally, apply the plugin!
$('.cpHeader').partialcollapsiblepanel();Options
| name | type/values | description |
|---|---|---|
| contentHeight | integer | collapsed content width. default is 60. |
| animateSpeed | integer | the speed at which the content collapses/expands. default is 500. |
| enableHeaderImage | boolean | if the header contains an image that has to be replaced. default is false |
| headerImageClass | string | css class of the image in the header div. applicable only if header image is enabled. default is <blank> |
| expandedImageUrl | string | image url to be used if header image is enabled and the content is expanded. applicable only if header image is enabled. default is <blank> |
| collapsedImageUrl | string | image url to be used if header image is enabled and the content is collapsed. applicable only if header image is enabled. default is <blank> |
| contentClass | string | css class of the content for the associated header. default is cpContent. |
| padHeader | boolean | specify if content inside the header has to be padded. the padding width is 2px |
| padContent | boolean | specify if content inside the content has to be padded. the padding width is 2px |