Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0/angular-animate.js"></script>
<div ng-controller="MyCtrl">
    <div>
        <div data-ng-click="showContent()" data-ng-show="!visible" class="fly-in-group">Some caption</div>
        
        <div data-ng-show="visible" class="fly-in-group">
            <div data-ng-click="showHeadings()">Back</div>
            <div>item 1
                <br/>item 2</div>
        </div>
    </div>
</div>

CSS

.fly-in-group {
    -webkit-transition:all 0.5s linear 0s;
    transition:all 0.5s linear 0s;
    position: absolute;
    right: 0;
    line-height:15px;
    opacity:1;
    padding:10px;
}
.fly-in-group.ng-hide {
    display: block !important;
    position: absolute;
    right: -999px;
}

JavaScript

var myApp = angular.module('myApp', ['ngAnimate']);

function MyCtrl($scope) {
    $scope.visible = false;

    $scope.showContent = function () {
        $scope.visible = true;
    }

    $scope.showHeadings = function () {
        $scope.visible = false;
    }
}