Angular: Empty Fiddle

http://angularjs.org/

by Zaiste

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="el in elements">
            <h4><a href="#" ng-click="show = !show">{{el.name}}</a></h4>
             <div class="details" ng-class="{'hidden': !show}">
                <p>Amount: {{el.amount}}</p>
                <p>Size: {{el.size}}</p>
             </div>
        </li>
    </ul>
</div>

CSS

.details {
    max-height: 100px;
    transition: .8s;
    overflow: hidden;
    border: 1px solid #EFEFEF;
}

.details.hidden {
    max-height: 0;
}

JavaScript

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

function MyCtrl($scope) {
    $scope.elements = [
        {
            name: 'Name 1',
            amount: 1,
            size: 1,
        },
        {
            name: 'Name 22',
            amount: 22,
            size: 22,
        },
        {
            name: 'Name 333',
            amount: 333,
            size: 333,
        }
        ];
        
        
}