"Toggleslide form"
Bootstrap 3.3.0 Snippet by Salehin

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<div class="container" id="toggle">
<div class="row">
<h2><a href="#" class="btn btn-success"> Click Here </a></h2>
<div class="wrapper">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Filter</div>
<a href="#" class="close"><span aria-hidden="true">×</span></a>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
#toggle {
text-align:center;
}
.wrapper {
background-color:#449D44;
color:#fff;
padding:30px;
display:none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
$("h2").click(function(){
$(".wrapper").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro Angular
login-form
Login Form
Contact Form

Questions / Comments: