JSFiddle - React, Tailwind, and code Playground
by TsarS
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<body ng-app="cars">
<section ng-controller="HomeController">
<section class="row" >
<div class="container">
<div class="col-md-8">
<h3><b>С</b>ars</h3>
<div class="col-md-6">
<accordion close-others="oneAtATime">
<accordion-group is-open="status.open">
<accordion-heading>
Choose your symptoms <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<div ng-repeat="disease in diseasesgroup">
<ul>
<li>
<a href="#" ng-click="showDetails = !showDetails">{{disease.name}}</a>
</li>
</ul>
</div>
</accordion-group>
</accordion>
</div>
<div class="col-md-6">
</div>
</div>
<div class="col-md-4">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</section>
</section>
</body>
JavaScript
angular.module('cars',['ui.bootstrap']).controller('HomeController', ['$scope',
function ($scope) {
$scope.groupname = [
{name: 'Engine'},
{name: 'Light'},
{name: 'Gears'}
];
$scope.oneAtATime = true;
}]);