How to transform a sidebar into an accordion!


I love front-end engineering, especially when the solution (which is not obvious) requires some sort of cross-disciplinary expertise.

I recently stumbled upon the following challenge: Turning a sidebar into an accordion on small screens and restore its original state on large screens. Sounds exciting? Watch the video below and read on.



First, let’s visualise the end result:

What is expected of us? What will the final result look like?

  • On a large viewport: the sidebar should be normally displayed with all its content
  • On a small viewport: the sidebar becomes an accordion which is initially closed (obviously to save some space); the user will have to manually expand it to consume the content
  • If the viewport’s width changes from small to large: the accordion should be deactivated and restored back to the sidebar’s initial state


Then, let’s consider the development environment and technologies used:

I believe any viable engineering solution should first consider the development environment, so let’s list the technologies used while specifying their importance:

  1. Twitter Bootstrap: for its excellent accordion plugin and famous grid system
  2. AngularJS directive: which will encapsulate all the logic and attach it as a behaviour to the sidebar
  3. Window matchMedia: for handling a specific breakpoint within the JavaScript code

The use of CSS in this case study is negligible (just a simple class to hide content).


Our methodology for solving the problem:

The methodology I’ve developed over years of experience is the following:

  1. Don’t force anything (unless there is no other way)
  2. Avoid reinventing the wheel (has this somehow been done before?)
  3. Craft your solution around powerful leverages (there must be something out there that can make your job easier and faster)

That being said, here is how we will …

Avoid reinventing the wheel:

  1. Turning our sidebar into an accordion: we’ll use Twitter Bootstrap’s collapse plugin (no need to engineer an accordion)
  2. Watching for a specific breakpoint on the JavaScript side: We’ll use matchMedia function (no need to constantly track the slightest change of the viewport’s width)

Craft our solution around powerful leverages:

We will encapsulate our logic inside an AngularJS directive that we’ll use as a decorator to attach the desired behaviour to our sidebar. Here are the basic steps of the solution (found as methods inside the directive)

  1. Handling the breakpoint change: We’ll track a specific breakpoint (using matchMedia). Each time that point is reached, we’ll turn the sidebar into an accordion or vice versa
  2. Deactivate or activate the accordion: The accordion will only operate on small screens, so we need to manually turn it off when necessary
  3. Expand the accordion: When returning the accordion back to a sidebar, we must make sure it isn’t collapsed, so we need a way to manually expand it
  4. Collapse the accordion: The accordion must be initially collapsed, so we need a manual way to do it

And we’re done! After putting everything together, things should work perfectly like in this special pen; the full code can be found in our CodePen profile.


In conclusion:

We’ve just seen how to solve the engineering problem of turning a sidebar into an accordion on small screens and vice versa. We based our approach on the following paradigms:

  • Clearly stating the problem
  • Identifying the solution’s great steps
  • Leveraging solid and powerful preexisting components

I hope this article had been insightful. Don’t hesitate to share your thoughts with me, I’ll be glad to answer. Thank you!