Multiple Collapsed

How-to Discussions
1

Give me a code for Multiple Collapsed content. Multiple show/hide panel.

Like below image

file

Thanks.

2

Hi! I wrote an example for you :slight_smile:

<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        function Person(name){
             this.name = name;
        }

        function Item(title, people){
            this.title = title;
            this.people = people;
        }

        var items = Observable();

        items.add(new Item("OFFENSIVE GUARD",
                      Observable(new Person("Jaquez Johnson"), new Person("Jason Driskel"), new Person("Michael Harrop"))));
        items.add(new Item("OFFENSIVE TACKLE",
                      Observable(new Person("Jaquez Johnson"), new Person("Jason Driskel"), new Person("Michael Harrop"))));
        items.add(new Item("QUARTER BACK",
                      Observable(new Person("Jaquez Johnson"), new Person("Jason Driskel"), new Person("Michael Harrop"))));
        items.add(new Item("WIDE RECEIVER",
                      Observable(new Person("Jaquez Johnson"), new Person("Jason Driskel"), new Person("Michael Harrop"))));

        module.exports = {
            items: items
        };

    </JavaScript>

    <ScrollView>
        <StackPanel>
            <Each Items="{items}">
                <DockPanel Margin="0,2">
                    <Panel Height="50" Background="Yellow" Dock="Top">
                        <Text Value="{title}" Alignment="Center"/>
                        <Panel Background="Green" Alignment="CenterLeft" Margin="20,0" Width="40" Height="40">
                            <Text Value="+" FontSize="24" Alignment="Center" TextColor="#fff"/>
                            <Clicked>
                                <Toggle Target="isVisible"/>
                            </Clicked>
                        </Panel>

                    </Panel>

                    <WhileTrue ux:Name="isVisible">
                        <Change subPanel.Visibility="Visible" />
                    </WhileTrue>
                    <StackPanel ux:Name="subPanel" Background="Teal" Visibility="Collapsed">
                        <Each Items="{people}">
                            <Panel Height="50">
                                <Text Value="{name}" TextColor="#fff"/>
                            </Panel>
                        </Each>
                    </StackPanel>
                </DockPanel>
            </Each>
        </StackPanel>
    </ScrollView>
</App>
3

Thanks Mr.Kristian :slight_smile:

awesome dude :wink: