"Dropdown jQuery Animation"
Bootstrap 4.1.1 Snippet by tsinppets

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"> <head> <title>Bootstrap Example</title> </head> <body> <div class="container"> <br /> <h2>Dropdown JQuery Animation</h2> <br /> <div class="dropdown"> <button class="btn btn-lg btn-success" id="showbutton">Dropdown Button <span class="glyphicon glyphicon-chevron-down"></span></button> <div class="dropdown-menu" id="showing"> <a class="dropdown-item" href="#">Link no. 1</a> <a class="dropdown-item" href="#">Link no. 2</a> <a class="dropdown-item" href="#">Link no. 3</a> </div> </div> </div> </body> </html>
$(document).ready(function(){ $("#showbutton").click(function(){ $("#showing").slideToggle("slow"); }); });

Related: See More

Now UI Kit
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: