I have been attempting to toggle the visibility of a div element. The goal is to show a list of hospitals and, upon clicking on a hospital name, display corresponding information using AngularJS. I've noticed that if I remove 'ng-repeat="x in data" ng-if="x.collegeID == returnSchool()"', the dropdown functionality works but no data from the JSON object is displayed. On the other hand, if I delete 'class="drop-panel animated fadeIn"', all information is always visible without the need to click (no dropdown effect). I'm struggling to identify where I may be going wrong. My objective is simply to click on a hospital name and see the associated information displayed below it.
localHospital.html
<!-- resource start -->
<div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">
<!-- resource header & icon -->
<div class="list-item question"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>
<!-- resource data -->
<div class="drop-panel animated fadeIn">
<!-- phone number -->
<p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
<a href="tel:{{x.hospitalPhoneNumber}}" target="_blank"><p class="resource-content">{{x.hospitalPhoneNumber}}</p></a>
<!-- location -->
<p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
<a href="http://maps.google.com/?q={{x.hospitalAddress}}" target="_blank"><p class="resource-content">{{x.hospitalAddress}}</p></a>
...
</div>
</div>
<!-- resource end -->
style.css
.drop-panel {
display: none;
}
.drop-panel.show {
display: block !important;
}