how to collapse,overlap and uncollapse 3 rectangle that i created in my app!?

stackprogramer

how to collapse,overlap and uncollapse 3 rectangle that i created in my app when the mouse is on area the rectangles!?
please see this link picture
link text
i want to it collapse and uncollapse from side like cards when the mouse is on area,can any one guide me!
this is my source

ader2 }

import QtQuick 2.2
import QtQuick.Window 2.1

Window {
visible: true
width: 360
height: 600
color:"#ffffff";
Loader { id: pageLoImage {
id:logoimage
source: "SpiralLogo.png"
x:110
y:220

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}
Item {
    Timer {
        interval: 500; running: true; repeat: true

      onTriggered: time.text =Date().toString()


    }

    Text { id: time
    x:95
    y:120

    }
}
Text {
    text: qsTr("Spiral Calculator v1.0\nDevoloped by R.B\nA software for calculations,plots curves,\nmath funcions and equations")

    anchors.centerIn: parent
}
Rectangle {
    width: 100
    height: 100
    x:100
    y:100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10

}
Rectangle {
    width: 100
    height: 100
    x:5
    y:100
    color: "steelblue"
    border.color: "black"
    border.width: 5
    radius: 10
    Text {
        color: "#00FF00"
        x:5
        y:30
        text: "<b>Calculator</b> <i>world</i>"

    }
    MouseArea {
        anchors.fill: parent
        onClicked: pageLoader2.source = "calculator.qml"
         //onClicked: pageLoader2.source = "main.qml"
    }
}
Rectangle {
    width: 100
    height: 100
    x:200
    y:100
    color: "green"
    border.color: "black"
    border.width: 5
    radius: 10
}
Text {id:exut
    x:10
    y:150
    text: qsTr("funcions and equations")

    anchors.centerIn: parent
}

}

thanks for reply