Ng-Click-8

In this example of ng-click, we will use the animation to show and hide the div. Clicking on the button with text Slide Down will add the class slideDown which will basically show the div using animation and Slide Up button will hide the div. See the output:

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style type="text/css"> .fade { border: 1px solid black; margin: 0 !important; position: relative; top: 44px; z-index: 9999; -webkit-transition: height 2s ease-in-out; transition: all 2s ease-in-out; height: 0; opacity: 0; } .fade.active { height: 300px; opacity: 1; } </style> </head> <body ng-app=""> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <br /> <button ng-click="slideDown=true" class="btn btn-success">Slide Down</button> <button ng-click="slideDown=false" class="btn btn-success">Slide Up</button> <br /> <div class="fade" ng-class="{'active':slideDown}"> <div style="padding:40px"> <p>LearnKode is a website for Beginner and Professional to learn AngularJS step by step and the biggest advantage is that while learning you can experiment your code Online.</p> <p>Contact Us</p> <p>[email protected] </p> <p>Panchkula, India</p> </div> </div> </div> </div> </div> </body> </html>

Output