Demo of ToggleShowHide Behavior
Title One
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam in augue. Aliquam auctor, felis ut nonummy vulputate, sapien justo consectetuer nisl, id ultricies velit sem in nibh.
Title Two
Pellentesque tempor. Donec dignissim, urna eget gravida varius, ipsum nisl blandit augue, eget tempus nibh felis non tortor. Etiam nec mi sed ante hendrerit venenatis.
Title Three
Duis cursus ullamcorper nulla. Proin nibh nisi, pretium eget, mattis ut, dictum eget, neque. Aliquam mi turpis, congue eget, rhoncus et, vehicula vel, sem. Curabitur mattis magna.
Title Four
Aenean bibendum sodales ipsum. Nullam placerat velit et justo. Nunc scelerisque. Suspendisse potenti. Donec massa. Nulla facilisis. Donec pulvinar consequat orci.
With the ToggleShowHide you can toggle opening and closing elements. In this example, we target the header of each content area ('.header'). The style for the cursor is set to the pointer and a Click event is set for it. On the click, we switch out a style class (with ToggleClass) that flips the open/close icon.
Finally, we target the content ('.content') and perform the ToggleShowHide behavior (which will switch the display of the content area from open/close).
$proto('.header', {
SetStyle: {cursor: 'pointer'},
Click: {
onClick: {
ToggleClass: {
styleClass: 'closed-title',
otherStyleClass: 'opened-title'
},
ToggleShowHide: {
target: '.content'
},
}
}
});
SetStyle: {cursor: 'pointer'},
Click: {
onClick: {
ToggleClass: {
styleClass: 'closed-title',
otherStyleClass: 'opened-title'
},
ToggleShowHide: {
target: '.content'
},
}
}
});
For a full description of this behavior see the ToggleShowHide Documentation Page.