Bootstrap Snippet SlideToggle form bottom using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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">
    <div class="wrapper">
        <h2><button class="btn btn-primary">Click Here</button></h2>
    </div>
    <div class="row">
        <article>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        </article>
        
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.container  {
    text-align:center;
}
.wrapper {
    text-align:center;
    position:absolute;
    bottom:0px;
    z-index:5;
}
h2 {
    margin:0;
    text-align:center;
}
.btn {
    background-color:#333;
    border-radius:0;
}
article {
    padding:100px;
    background-color:#333;
    color:#fff;
    text-align:center;
    position:absolute;
    bottom:0;
    display:none;
    z-index:4;
    margin-bottom:34px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$(document).ready(function(){
    $(".btn").click(function(){
        $("article").slideToggle("slow");
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"SlideToggle form bottom"
Bootstrap 3.0.0 Snippet by prabuanan

Related: See More

Questions / Comments:

"SlideToggle form bottom" Bootstrap 3.0.0 Snippet by prabuanan

Related: See More

Questions / Comments:

"SlideToggle form bottom"
Bootstrap 3.0.0 Snippet by prabuanan