Forum Discussion

KaelaC's avatar
KaelaC
Lithium Alumni (Retired)
12 years ago

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:

 

collapsed.png

 

 

Open:

collapsed-open.png

 

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!

  • dementad's avatar
    dementad
    Genius
    12 years ago

    Well... Love it, but.

     

    Every time the page reloads, the widget is reset. I need the widget to save state so that it remains collapsed/expanded, at least for the user session.

     

    I'm trying to use a cookie to save the state, etc. but I clearly don't understand how to use a cookie with Lithium's implementation. If someone can provide an example, I'd appreciate it.

     

    Thanks!

  • MoniqueL's avatar
    MoniqueL
    Lithium Alumni (Retired)
    12 years ago
    Voting for those with the power to make this a TKB?
  • JillianB's avatar
    JillianB
    Genius
    10 years ago

    Apologies for posting on an old post, but this is definitely the best place to ask a follow up question...

     

    How do I start out my modules collapsed instead of expanded? Everything provided above works perfect (I wish I could give dozens of kudos!), but in our situation we're trying to let users expand categories they're interested in. It's a space concern and makes for good UX.

     

    Thank you SO much for writing this wonderful post!