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>
    <div ng-if="opened">
      <div>
        {{opened.name}} 
      </div>
      <a ng-click="close()">close</a>       
    </div>
  </ul>
</div>

JavaScript

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

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

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

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

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

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


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

    });

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

    });