I'm currently facing an issue with Angular version 1.4.5 where only the element "termsinfo" is being displayed while the others are not showing up at all. If anyone can assist me, I will post the code in a simulation for troubleshooting.
// Code goes here
var app = angular.module('app',[]);
app.controller('legalController', function ($timeout, $scope) {
$scope.termsinfo = true;
$scope.cookiesinfo = false;
$scope.privacy = false;
$timeout(function () {
$scope.terms = function () {
$scope.termsinfo = true;
$scope.cookiesinfo = false;
$scope.privacy = false;
}
$scope.cookies = function () {
$scope.termsinfo = false;
$scope.cookiesinfo = true;
$scope.privacy = false;
}
$scope.private = function () {
$scope.termsinfo = false;
$scope.cookiesinfo = false;
$scope.privacy = true;
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="legalController">
<div id="splash">
<div id="intro-container">
<h1>legal</h1>
<h3>Find legal information and resourcesservices</h3>
</div>
<div id="splash-overlay"></div>
</div>
<div id="legal-sections">
<div id="switcher">
<ul>
<li><a id="open-terms-use" ng-click="terms()">Terms of Use</a></li>
<!--<li><a id="open-security">Security</a></li>-->
<li><a id="open-cookies" ng-click="cookies()">Cookies Policy</a></li>
<li><a id="open-private" ng-click="private()">Private Policy</a></li>
</ul>
</div>
<div id="terms-use" ng-show="termsinfo">
<section>
<div class="container">
<div class="Ehl-Page-Header">
<h1 class="h2">Terms of use</h1>
</div></div>
</section>
</div>
<div id="security">
</div>
<div id="cookies" style="display: none;" ng-show="cookiesinfo">
<div>
<section class="clear container-fluid" id="Cookies-Top">
<div class="Bg-Mask"></div>
<div class="container">
<h1 class="h2">Cookies</h1>
</div>
</section>
</div>
</div>
<div id="private-policy" style="display: none;" ng-show="privacy">
<div>
<section>
<div class="container">
<div class="Ehl-Page-Header">
<h1 class="h2">Privacy</h1>
</div></div>
</section>
</div>
</div>
</div>
</body>
</html>