Show a hidden section when a click a card

Question

Hi, 
 I'm trying to build a interface using card layout and once I've click one of the cards,a hidden section will be presented in the same interface. I've tried this, but I think I missing something. 
 Can someone put me on right track it will be much appreciated. 
 
 load( local!completed:false, {a!cardLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "hourglass-2", color: "#8CA1D0", size: "LARGE" ), char( 10 ), char( 10 ), a!richTextItem( text: "Done", color: "ACCENT", size: "MEDIUM", style: "STRONG" ), char( 10 ), char( 10 ), a!richTextItem( text: "3", size: "LARGE" ) }, align: "CENTER" ) }, link: a!submitLink( saveInto: a!save( local!completed, true ) ), height: "AUTO" )} with( { a!sectionLayout( contents: { a!textField( value: "ok", showWhen: local!completed = false ), a!textField( value: "ok1", showWhen: local!completed = true ) }) } ) )

Josh · Answer

This should get you on the right track.

Fullscreen 
 HiddenInterface.txt 
 Download 
 
 load(
 local!completed: false,
 {
 a!sectionLayout(
 contents: {
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextIcon(
 icon: "hourglass-2",
 color: "#8CA1D0",
 size: "LARGE"
 ),
 char(
 10
 ),
 char(
 10
 ),
 a!richTextItem(
 text: "Done",
 color: "ACCENT",
 size: "MEDIUM",
 style: "STRONG"
 ),
 char(
 10
 ),
 char(
 10
 ),
 a!richTextItem(
 text: "3",
 size: "LARGE"
 )
 },
 align: "CENTER"
 )
 },
 link: a!dynamicLink(
 saveInto: a!save(
 local!completed,
 true
 )
 ),
 height: "AUTO"
 )
 }
 ),
 a!sectionLayout(
 contents: {
 a!textField(
 value: "ok",
 showWhen: local!completed = false
 ),
 a!textField(
 value: "ok1",
 showWhen: local!completed = true
 )
 }
 )
 }
)

swarajd0001 · Answer

Hi miket, 
 find the below code .. 
 load(
 local!completed: false(),
 {
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextIcon(
 icon: "hourglass-2",
 color: "#8CA1D0",
 size: "LARGE"
 ),
 char(
 10
 ),
 char(
 10
 ),
 a!richTextItem(
 text: "Done "& local!completed,
 color: "ACCENT",
 size: "MEDIUM",
 style: "STRONG"
 ),
 char(
 10
 ),
 char(
 10
 ),
 a!richTextItem(
 text: "3",
 size: "LARGE"
 )
 },
 align: "CENTER"
 )
 },
 link: a!submitLink(
 saveInto: a!save(
 local!completed,
 true
 )
 ),
 height: "AUTO"
 ),
 a!sectionLayout(
 contents: {
 a!textField(
 value: "ok",
 showWhen: local!completed = false
 ),
 a!textField(
 value: "ok1",
 showWhen: local!completed = true
 )
 }
 )
 }
 
 )