JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" ng-app="keys">
  <ul ng-controller="KeysController">
    <li ng-repeat="key in keys" >
      <button ng-click="open(key) ">{{key.content}}</button>
    </li>
    <hr>
    <ng-switch on="anyItemOpened()">
        <div ng-switch-when="true">
          <div>
            {{opened.name}} 
          </div>
          <a ng-click="close()">close</a>
        </div>
    </ng-switch>
  </ul>
</div>

JavaScript

var app = angular.module('keys',[]);

    app.controller('KeysController',function($scope){

        $scope.opened = undefined;
        $scope.open = function(key){
            console.log(key);
            if(this.isOpen(key)){
                this.opened = undefined;
            } else {
                this.opened = key;
            }
        };

        $scope.isOpen = function(key){
            return this.opened === key;
        };

        $scope.anyItemOpened = function(){
            return this.opened !== undefined;
        };

        $scope.close = function(){
            this.opened = undefined;
        };


        $scope.keys = [
            {name: 'item1', content: 'content1'},
            {name: 'item2', content: 'content2'},
            {name: 'item3', content: 'content3'}
        ]

    });

    app.controller('KeyController', function(){

    });