Bootstrap Snippet Collapsible Footer Widget using HTML CSS Bootstrap 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
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-5 widget">
                <h2>Article</h2>
                <article class="widget_content">
                    <ul>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
                        <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
                        <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
                        <li>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae </li>
                        <li>Nemo enim ipsam voluptatem quia voluptas sit aspernatur</li>
                 </ul>
                 </article>
            </div>
            <div class="col-md-3 widget">
                <h2>Link</h2>
                <article class="widget_content">
                    <ul>
                        <li>Bootsnipp</li>
                        <li>Get Bootstrap</li>
                        <li>My BLog</li>
                        <li>Facebook</li>
                        <li>Follow me</li>
                 </ul>
                 </article>
            </div>
            <div class="col-md-4 widget">
                <h2>Contact Us</h2>
                <article class="widget_content">
                    <p>Jl. Lingkar Selatan, Kasihan, Bantul<br> Yogyakarta Indonesia 55183<br>Phone: +62 274 387656</p>
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
31
32
33
34
35
36
37
.footer {
 background:#f6f6f6;
 padding:20px 0;
 border-top:2px solid orange;
}
.widget h2 {
 cursor:pointer;  
 font-size:18px;
 font-weight:bold;
 padding-bottom:5px;
}
.footer-bottom {
 background:#d8d8d8;
 padding:15px 0;
 border-top:1px solid #d9d9d9;
 font-size:11px;
 color:#777;
}
  
@media only screen and (max-width: 479px) {    
     .widget_content{
        display:none;
    }
    .active .widget_content{
        display:inline; 
    }
    .widget h2 { 
        border-bottom:1px solid #ddd;
    }   
    .widget h2:after {
        content:"\203A";
        color:white;
        width:20px;
        height:20px;
        background:#999;
        display:inline-block;
        text-align:center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
$(document).ready(function() {  
    $( ".widget h2" ).click(
        function() {
            $(this).parent().toggleClass('active');
        }
    );      
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Collapsible Footer Widget"
Bootstrap 3.1.0 Snippet by yaufaniadam

Related: See More

Questions / Comments:

"Collapsible Footer Widget" Bootstrap 3.1.0 Snippet by yaufaniadam

Related: See More

Questions / Comments:

"Collapsible Footer Widget"
Bootstrap 3.1.0 Snippet by yaufaniadam