import QtQuick 2.0

Rectangle {
    id: container
    width: 300
    height: 300

    function createModel() {
        for (var i=0; i<10; i++)
            animalsModel.append({"name": i + " Parrot", "size": "Small", "visibility": true})
        for (i=10; i<20; i++)
            animalsModel.append({"name": i + " Cat", "size": "Medium", "visibility": true})
        for (i=20; i<30; i++)
            animalsModel.append({"name": i + " Elephant", "size": "Large", "visibility": true})
    }

    Component.onCompleted: {
        createModel()
    }

    ListModel {
        id: animalsModel
    }

    Component {
        id: sectionHeading

        Rectangle {
            width: container.width
            height: collapsed ? 30 : 50
            color: collapsed ? "blue" : "lightsteelblue"
            property bool collapsed: false

            Text {
                anchors.fill: parent
                text: section
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.bold: true
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    collapsed = !collapsed
                    for(var i=0; i<animalsModel.count;i++) {
                        var item = animalsModel.get(i);
                        if(item.size === section) {
                            item.visibility = !collapsed
                        }
                    }
                }
            }
        }
    }

    ListView {
        id: listView
        anchors.fill: parent
        model: animalsModel

        delegate: Text {
                text: name
                height: 50
                width: container.width
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                visible: visibility
                onVisibleChanged: {
                    visible ? height=60 : height=0
                }
            }
        section.property: "size"
        section.criteria: ViewSection.FullString
        section.delegate: sectionHeading
        section.labelPositioning: ViewSection.InlineLabels|ViewSection.CurrentLabelAtStart
    }
}