my my github



Karthik Ananth

Karthik Ananth


Collapsible Panel
1178 downloads

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 <img /> tag anymore. you just have to set the enableHeaderImage property and specify the expandedImageUrl and collapsedImageUrl urls.


an example


following is an example usage and the corresponding output ( new window )

Lorem Ipsum
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.

how to use it?


okay, how do you use it in your projects? here you go, it's just a few steps.
1. 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>
    

2. include jquery and partial collapsible panel javascript files

        <script type="text/javascript" language="javascript" src="jquery.min.js"></script>
        <script type="text/javascript" language="javascript" src="partial-collapsible-panel.minified.js"></script>
    

3. 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>       
    

4. 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

archives


v1.0 - full source | minified source | demo

comments


Figured it out, replace $cpContent.css('height', settings.contentHeight + 'px').css('overflow-y', 'hidden'); with $cpContent.css('overflow-y', 'hidden'); That should really be an option.
Posted at 10/15/2013 1:58:28 PM

How do you get it to default to uncollapsed?
Posted at 10/15/2013 1:43:25 PM


post your comment



name (won't be published)
email (won't be published)
your comment
are you human?