<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="//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> </article> </div> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="row"> <div class="col-md-12 widget">© 2014 | Created with Boostrap <span class="pull-right">Minimize your browser »</span> </div> </div> </div> </div>

.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:100%; height:200px; background:#999; display:inline-block; text-align:center; float:right; } .active.widget h2:after { content:"\2039"; background:#ccc; } }

$(document).ready(function() { $( ".widget h2" ).click( function() { $(this).parent().toggleClass('active'); } ); });