ng-repeat to open content - html

Question

I am trying to make a list of buttons appear, and once selected for the appropriate div underneath the button to be shown, I have used similar code before:
<li><button class="w3-button w3-grey w3-hover-dark-grey w3-round-xxlarge" ng-click="section = !section">Structure and function of the processor</button></li>
Which works fine so I am guessing it has something to do with $index
Do you have any idea how I could achieve this?
<div class="w3-panel" ng-show="section">
henlo content
</div>
<div ng-app="tApp" ng-controller="tController">
<ul class="w3-ul">
<div ng-repeat="x in items">
<li>
<button class="w3-button w3-grey w3-hover-dark-grey w3-round-xxlarge" ng-click="section{{$index}} = !section{{$index}}">{{x.name}}</button>
</li>
<div class="w3-panel" ng-show="section{{$index}}">
{{x.content}}
</div>
</div>
</ul>
</div>
<script>
var app=angular.module("tApp", []);
app.controller("tController", function($scope)
{
$scope.items=[{name:"first",content:"henlo first"},{name:"second", content:"henlo second"}];
});
</script>

Answer 1

you can initialise a property with ng-init and use that property to show/hide content
<div ng-repeat="x in items" ng-init="x.displayContent = false">
<li>
<button class="w3-button w3-grey w3-hover-dark-grey w3-round-xxlarge" ng-click="x.displayContent = !x.displayContent">{{x.name}}</button>
</li>
<div class="w3-panel" ng-show="x.displayContent">
{{x.content}}
</div>
</div>