How to Create a Collapsible Footer

Responsive websites are no longer design trends; they’re necessities. With over half of web users accessing the internet via smartphone rather than desktop, websites that don’t look function on mobile simply won’t survive. In fact, most websites are now being designed with mobile-first usage in mind. And ensuring your site works on a smartphone as well as it does on desktop is also now a bigger ranking priority for Google than it has been in previous years.

Most websites do a decent job of making sure their website is responsive from stem to stern, but even the best web pages can sometimes forget about one critical part -- the footer. Here’s a quick and easy tutorial using simple Bootstrap, HTML and SCSS.

HTML

The HTML relies heavily on some standard bootstrap classes, particularly 'collapse' and 'accordion' for its responsive functionality:

<footer class="footer-collapse px-1 py-3"> <div class="col-lg-9 mx-auto"> <h2 class="sr-only">Solodev Content Management System</h2> <div class="row"> <div class="col-sm-6 col-md-3"> <div class="widget hidden-xs-down"> <h4 class="text-uppercase text-bold">Product</h4> <ul class="widget-list list-unstyled p-0"> <li><a href="https://www.solodev.com/product/create.stml">Create Websites</a></li> <li><a href="https://www.solodev.com/product/host.stml">Secure Cloud Hosting</a></li> <li><a href="https://www.solodev.com/product/engage.stml">Engage Your Audience</a></li> <li><a href="https://www.solodev.com/product/support.stml">Website Support</a></li> </ul> </div> <div id="accordion" role="tablist" aria-multiselectable="true" class="widget hidden-sm-up"> <div role="tab" id="headingOne"> <h4 class="card-header py-3 border-0 text-uppercase text-bold"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Product </a> </h4> </div> <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="card-block"> <ul class="widget-list list-unstyled p-0"> <li><a href="https://www.solodev.com/product/create.stml">Create Websites</a></li> <li><a href="https://www.solodev.com/product/host.stml">Secure Cloud Hosting</a></li> <li><a href="https://www.solodev.com/product/engage.stml">Engage Your Audience</a></li> <li><a href="https://www.solodev.com/product/support.stml">Website Support</a></li> </ul> </div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="widget hidden-xs-down"> <h4 class="text-uppercase text-bold">Company</h4> <ul class="widget-list list-unstyled p-0"> <li><a href="https://www.solodev.com/company/">About</a></li> <li><a href="https://www.solodev.com/careers/">Careers</a></li> <li><a href="http://solodev.zendesk.com" target="_blank">Support</a></li> <li><a href="https://www.solodev.com/pricing/">Pricing</a></li> <li><a href="https://www.solodev.com/pricing#faq">FAQ</a></li> </ul> </div> <div id="accordion" role="tablist" aria-multiselectable="true" class="widget hidden-sm-up"> <div role="tab" id="headingTwo"> <h4 class="card-header py-3 border-0 text-uppercase text-bold"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Company </a> </h4> </div> <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="card-block"> <ul class="widget-list list-unstyled"> <li><a href="https://www.solodev.com/company/">About</a></li> <li><a href="https://www.solodev.com/careers/">Careers</a></li> <li><a href="http://solodev.zendesk.com" target="_blank">Support</a></li> <li><a href="https://www.solodev.com/pricing/">Pricing</a></li> <li><a href="https://www.solodev.com/pricing#faq">FAQ</a></li> </ul> </div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="widget hidden-xs-down"> <h4 class="text-uppercase text-bold">Resources</h4> <ul class="widget-list list-unstyled p-0"> <li><a href="https://www.solodev.com/blog/">Blog</a></li> <li><a href="https://www.solodev.com/resources/ebooks/">eBooks</a></li> <li><a href="https://www.solodev.com/resources/whitepapers/">Whitepapers</a></li> <li><a href="https://www.solodev.com/comparison-guide/index.stml">Comparison Guide</a></li> <li><a href="https://www.solodev.com/grader/">Website Grader</a></li> </ul> </div> <div id="accordion" role="tablist" aria-multiselectable="true" class="widget hidden-sm-up"> <div role="tab" id="headingThree"> <h4 class="card-header py-3 border-0 text-uppercase text-bold"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Resources </a> </h4> </div> <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> <ul class="widget-list list-unstyled p-0"> <li><a href="https://www.solodev.com/blog/">Blog</a></li> <li><a href="https://www.solodev.com/resources/ebooks/">eBooks</a></li> <li><a href="https://www.solodev.com/resources/whitepapers/">Whitepapers</a></li> <li><a href="https://www.solodev.com/comparison-guide/index.stml">Comparison Guide</a></li> <li><a href="https://www.solodev.com/grader/">Website Grader</a></li> </ul> </div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="widget hidden-xs-down"> <h4 class="text-uppercase text-bold">Get Help</h4> <ul class="widget-list list-unstyled list-unstyle p-0"> <li><a href="https://solodev.zendesk.com/hc/en-us" target="_blank">Help Center</a></li> <li><a href="https://www.solodev.com/contact/">Contact Us</a></li> <li><a href="https://www.solodev.com/terms/privacy-policy.stml">Privacy Policy</a></li> <li><a href="https://www.solodev.com/terms/">Terms</a></li> <!--<li><a href="/login.stml">Login</a></li>--> </ul> </div> <div id="accordion" role="tablist" aria-multiselectable="true" class="widget hidden-sm-up"> <div role="tab" id="headingFour"> <h4 class="card-header py-3 border-0 text-uppercase text-bold"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> Get Help </a> </h4> </div> <div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="card-block"> <ul class="widget-list list-unstyled p-0"> <li><a href="https://solodev.zendesk.com/hc/en-us" target="_blank">Help Center</a></li> <li><a href="https://www.solodev.com/contact/">Contact Us</a></li> <li><a href="https://www.solodev.com/terms/privacy-policy.stml">Privacy Policy</a></li> <li><a href="https://www.solodev.com/terms/">Terms</a></li> <!--<li><a href="/login.stml">Login</a></li>--> </ul> </div> </div> </div> </div> </div> </div> </footer> <h2>SCSS</h2> <p>Just a handful of lines of SCSS can customize the collapsible columns:</p>

SCSS

Just a handful of lines of SCSS will customize the collapsible columns:

h3, a, p { color: #1f2124; } h4 { font-size: 1rem !important; line-height: 1rem; } .widget-list { li { a { &:hover { text-decoration: underline; } } } } .widget { .card-header { background: #fff; a { width: 100%; display: block; &:after { content: "+"; position: absolute; right: 40px; top: .9rem; transition: transform .15s ease-in-out; } &:hover, &:focus { text-decoration: none; } &[aria-expanded="true"] { &:after { transform: rotate(45deg); } } } } .card-block { padding: 0 1.3rem; .widget-list { li { margin-bottom: 4px; } } } }

Try this out for your own website! Before you code, be sure to check out the finished product on the JSFiddle below. To see exactly how it responds, adjust the browser's window size to a variety of widths. Stretch it or shrink it however you want and see what this code could do for your website.