thekfactor

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 )

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

archives

comments

post your comment