<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="appController">
      <accordion close-others="true">
        <accordion-group is-disabled="offsitesDisabled" ng-click="runThis()">
          <accordion-heading>
            <span>Offistes</span>
          </accordion-heading>
          
          Your offsites content here.
        </accordion-group>
        
        <accordion-group is-disabled="buildingsDisabled" ng-click="runThat()">
          <accordion-heading>
            <span>Buildings</span>
          </accordion-heading>
          
          Your buildings content here.
        </accordion-group>
      </accordion>
    </div>
  </body>

</html>

// Code goes here

angular
  .module('app', ['ui.bootstrap'])
  .controller('appController', appController);
  
function appController($scope) {
  $scope.offsitesDisabled = false;
  $scope.buildingsDisabled = false;
  
  $scope.runThis = function() {
    $scope.offsitesDisabled=true; 
    $scope.buildingsDisabled=false;
  }
  
  $scope.runThat = function() {
    $scope.offsitesDisabled = false;
    $scope.buildingsDisabled = true;
  }
}
/* Styles go here */