<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="box-group" id="tourAccordion_{{tourIndex}}" ng-repeat="tour in tourList" ng-init="tourIndex=$index">
<div class="panel box box-primary">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#tourAccordion_{{tourIndex}}" href="#collapseTour_{{tourIndex}}" aria-expanded="false" class="collapsed" ng-bind="tour.Name"></a>
</h4>
</div>
<div id="collapseTour_{{tourIndex}}" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="box-group" id="itineraryAccordion_{{tourIndex}}_{{itineraryIndex}}" ng-repeat="itinerary in tour.Itineraries" ng-init="itineraryIndex=$index">
<!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
<div class="panel box box-primary">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#itineraryAccordion_{{tourIndex}}_{{itineraryIndex}}" href="#collapseItinerary_{{tourIndex}}_{{itineraryIndex}}" aria-expanded="false" class="collapsed" ng-bind="itinerary.Name"></a>
</h4>
</div>
<div id="collapseItinerary_{{tourIndex}}_{{itineraryIndex}}" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="box-group" id="stopsAccordion_{{tourIndex}}_{{itineraryIndex}}_{{stopIndex}}" ng-repeat="stop in itinerary.Stops" ng-init="stopIndex=$index">
<!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
<div class="panel box box-primary">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#stopsAccordion_{{tourIndex}}_{{itineraryIndex}}_{{stopIndex}}" href="#collapseTimes_{{tourIndex}}_{{itineraryIndex}}_{{stopIndex}}" aria-expanded="false" class="collapsed" ng-bind="stop.Name"></a>
</h4>
</div>
<!-- NOTE: The following use of $parent.$parent.$index rather than tourIndex is deliberate! -->
<ul id="collapseTimes_{{$parent.$parent.$index}}_{{$parent.$index}}_{{$index}}" class="panel-collapse collapse">
<li ng-repeat="time in stop.Times">{{time}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
angular.module('app', [])
.controller('ctrl',
function($scope) {
$scope.tourList = [{
Name: "Tour 1",
Itineraries: [{
Name: "tour 1 itin 1",
Stops: [
{Name: "A", Times: ["09:00", "10:00"]},
{Name: "B", Times: ["11:00", "12:00"]}
]
}, {
Name: "tour 1 itin 2",
Stops: [
{Name: "C", Times: ["13:00", "14:00"]},
{Name: "D", Times: ["15:00", "16:00"]}
]
}]
}, {
Name: "Tour 2",
Itineraries: [{
Name: "tour 2 itin 1",
Stops: [
{Name: "E", Times: ["17:00", "18:00"]},
{Name: "F", Times: ["19:00", "20:00"]}
]
}, {
Name: "tour 2 itin 2",
Stops: [
{Name: "G", Times: ["21:00", "22:00"]},
{Name: "H", Times: ["23:00", "00:00"]}
]
}]
}]
}
);
/* Styles go here */