Ask Ubuntu is a question and answer site for Ubuntu users and developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

For the app I am developing I would like to have a list with sections that I can collapse or expand. The item in the sections can be clicked and open a DefaultSheet.

So, for example in the "Ubuntu UI toolkit Gallery" in the List Items tab, in "GroupedList", I would like to be able to click on "fruit" and collapse the list, and click again on it and expand the list.

How can I do that? Is that possible? (It is for ListItem.ValueSelector so it might be possible)

Thank you for your help.

share|improve this question
I'm not sure what you mean by "retract" and "develop". Could you clarify? – David Planella Jun 14 '13 at 10:27
Thank you for your answer. Sorry I am French, so I don't know the perfect word, is "Collapsible" ok? I mean that I have something like a ValueSelector but no selection in the header. Just when I click the List, it shows all the possibility and then I click one possibility and I get a popover. (the part with the popover is easy, it is the rest whisi isn't) – londumas Jun 15 '13 at 3:42
Thanks for the clarification, I've updated the question accordingly. – David Planella Jun 15 '13 at 17:56
If there is no way to do it I can make a bug report. But where? for what paquage? – londumas Jul 5 '13 at 15:14

I think what you need is the ListItem.Expandable SDK component. It was added in the 14.10 SDK Framework which is at the time of writing this answer is a development framework. It provides the capability to collapse and expand the listitem on clicking it.

I would recommend you read the API documentation here to learn more about the component and see how to use it in your application.

Code Sample

Here is a small code sample that creates such a component,

import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem

MainView {
    id: mainView


    Page {
        title: "Sample Expandable App"

        Column {
            anchors { left: parent.left; right: parent.right }
            clip: true

            Repeater {
                model: 2
                ListItem.Expandable {
                    id: expandingItem1
                    expandedHeight: contentCol1.height +

                    onClicked: {
                        expanded = !expanded;

                    Column {
                        id: contentCol1
                        anchors { left: parent.left; right: parent.right }
                        Item {
                            anchors { left: parent.left; right: parent.right}
                            height: expandingItem1.collapsedHeight
                            Label {
                                anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter}
                                text: "Item " + index

                        UbuntuShape {
                            anchors { left: parent.left; right: parent.right }
                            height: index % 2 == 0 ? :
                            color: "khaki"

Clock App Giff

I have attached a gif below where we use in the clock app to set the alarm duration.

enter image description here

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.