JSFiddle - React, Tailwind, and code Playground

by inadcod

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<ul class="procedures" ng-app ng-controller="sample">
    <li ng-repeat="procedure in procedures">
        <h4><a href="#" ng-click="showDetails = ! showDetails">{{procedure.definition}}</a></h4>
         <div class="procedure-details" ng-show="showDetails">
            <p>Number of patient discharges: {{procedure.discharged}}</p>
         </div>
    </li>
</ul>

CSS

li {    
    list-style: none;
    padding: 10px;
}




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
        }
    ];
}