Collapsible widgets - A code sample

Vincent had great idea over on the Suggest Your Ideas board (http://lithosphere.lithium.com/t5/customer-ideas/Collapsable-widgets/idi-p/27652).  I had coded up a demo of this functionality separately but would love to share it with you.  The original idea is currently "Uncommitted Candidate" but this one you can have right now if you are comfortable doing a bit of studio work.  Since you are reading the developer board, I'm thinking you are.

Closed:

Open:

Step 1: Create a Component

In Studio -> Components, create a new component with the following javascript.  In this case we are only collapsing the side column modules. We are writing the js using the <@liaAddScript> notation to take advantage of the jQuery library loaded on every Lithium page.

<@liaAddScript>
;(function() {
	jQuery(document).ready(function() {
		// Slide
		jQuery("#lia-body .lia-content .lia-quilt-column-side-content .lia-panel .lia-panel-heading-bar-wrapper").addClass("collapsed");

		jQuery("#lia-body .lia-content .lia-quilt-column-side-content .lia-panel .lia-panel-heading-bar-wrapper").click(function() {
			jQuery(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> .lia-panel-content-wrapper').slideToggle("medium");
		});
		
	});	

})();
</@liaAddScript>

Step 2: Add the Component to the Page

Go to the Page tab of Studio and place your new component.  If you wanted this to only be on a particular page, you would just add it to that page itself.  I wanted my code to run on all pages so I added it to the Footer.  The footer is added to all 'non-popup' pages so I should be covering it.

Step 3: Add Some Style

Go to the Community Style tab of Studio and navigate to your community skin.  You can get as fancy as you like with the CSS. This will get you started. I added two images to the assets folder that are 24px by 24px so I gave my header bar an extra 30px padding to make room for them.  

.collapsed {background:url('${asset.get("/html/assets/down.png")}') no-repeat center left; }
.expanded {background:url('${asset.get("/html/assets/up.png")}') no-repeat center left; }
#lia-body .lia-content .lia-quilt-column-side-content .lia-panel-content-wrapper {display:none;}
#lia-body .lia-content .lia-quilt-column-side-content .lia-panel > .lia-decoration-border > .lia-decoration-border-content > div .lia-panel-heading-bar-wrapper .lia-panel-heading-bar {
padding: 5px 0 5px 30px;}

Step 4: Celebrate!