JSFiddle - React, Tailwind, and code Playground

by deathhell

HTML

<ul class="procedures" ng-app ng-controller="sample">
    <li ng-repeat="procedure in procedures">
        <a href="#" ng-click="showDetails = ! showDetails">{{procedure.definition}}</a>
         <div class="procedure-details" ng-class="{ 'hidden': ! showDetails }">
            <p>Number of patient discharges: {{procedure.discharged}}</p>
         </div>
    </li>
</ul>

CSS

a{
    display: block;
    width:100px;
    color:#fff;
    background:#d41b3a;
    border-radius:4px;
    text-align:center;
    text-decoration:none;
    padding:4px 10px;
}
li {    
    list-style: none;
    padding: 10px;
}

.procedure-details {
    max-height: 100px;
    transition: .8s;
    overflow: hidden;
}

.procedure-details.hidden {
    max-height: 0;
}
ul {
    margin: 0;
    padding: 0;
}

JavaScript

function sample ($scope) {
    
    $scope.procedures = [
        {
            definition: 'Procedure 1',
            discharged: 23
        },
        {
            definition: 'Procedure 2',
            discharged: 2
        },
        {
            definition: 'Procedure 3',
            discharged: 356
        }
    ];
}