Ng-Show-Ng-Hide-8

 

In this example, there are two buttons for toggling the two containers. When you click on the "Toggle Lions" button, the Lions Image container will toggle ( toggle means hide and show on the button clicks ) and when click on the "Toggle Cats" button the Cats Image container will toggle. See the example

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app> <div class="container"> <div class="row"> <div class="col-md-12"> <a class="btn btn-primary" href="#" ng-click="lions = !lions">Toggle Lions</a> <a class="btn btn-success" href="#" ng-click="cats = !cats">Toggle Cats</a> </div> <br /> <div class="row"> <div class="col-xs-6 well" ng-show="lions"> <h3>LIONS IMAGE</h3> <!--<img src="Dashboard_US-600x533.png" />--> </div> <div class="col-xs-6 well" ng-show="cats"> <h3>CATS IMAGE</h3> <!--<img src="Dashboard_US-600x533.png" />--> </div> </div> </div> </div> </body> </html>
Output