Creating A Simple Collapsible Sidebar with JavaScript (No Framework Required)

A short and simple tutorial on how to create a collapsible sidebar for your website

Photo by JJ Ying on Unsplash

While working on a recent project, I discovered that I needed to create a sidebar that collapses when it’s not needed. As usual, I went online to seek help but I still had some difficulties while working on it. But as they say,

“Difficulties mastered are opportunities won”

The opportunity, in this case, is the fact that I found a method that’s a lot easier than most and is even simple to implement.

What is the Purpose of a Collapsible Sidebar?

If you have ever observed a well-designed website, you would have noticed that not all information is presented at once. In fact, most of these websites use collapsible sidebars to optimize pages and improved overall user experience. A collapsible sidebar helps to expand or collapse the available sidebar space when necessary.

I’ll explain the method I used while working on the project. First, we’ll create an HTML template, then apply CSS styling to it. We’ll then go on to use JavaScript to add functionality to our collapse button which carries out the collapse action.

HTML Template

<div class="grid-container">
    <div class="sidebar">
        <button>
            M
        </button>
    </div>
    <div class="main-content"></div>
</div>

First, create a simple container (“div”) with two sections: sidebar and main-content. Add a button to the sidebar which will execute the collapse effect; this will be discussed later. Then, add class names to the sections for appropriate styling.

Your view should look this way

CSS

.grid-container {
    width: 90vw;
    margin: 0 auto;
    height: 90vh;
    display: flex;
    border: 2px solid rgba(0, 0, 0, .4);
    transition: 1s ease;
}

First, we style the grid-container and make it a flex container. Child elements will automatically be arranged in a horizontal row. To show the effects and make the container stand out, add a border.

.sidebar {
  width: 30%;
  height: 100%;
  background-color: #54a;
  transition: 1s ease;
  position: relative;
}
.main-content {
  width: 70%;
  height: 100%;
  background-color: #ccc;
  transition: 1s ease;
}

The sidebar and main-content elements were given a collective width of 100% to ensure that the page width is always maximized. I added background colors to give a visual effect for the sake of this tutorial. You can style your sections as desired.

The CSS transition property controls how the collapse effect is applied to the elements also. You can read more about the CSS transition property here.

.main-content_large {
  width: 90%;
}
.sidebar_small {
  width: 10%;
}

We will add these classes to the sidebar in the JavaScript section to apply the collapse effect. The collapsed width of the sidebar and the expanded width of our main-content elements are set. Next, we style our collapse button.

button {
  position: absolute;
  border: none;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
  left: 100%;
  top: 2rem;
  transform: translateX(-50%);
  cursor: pointer;
}

The button is styled to be separate from the sidebar content; it controls the collapse effect. The button appears to be attached to the right end of the sidebar. This is done using the CSS transform property.

JavaScript

const sidebar = document.querySelector('.sidebar');
const mainContent = document.querySelector('.main-content');
document.querySelector('button').onclick = function () {
  sidebar.classList.toggle('sidebar_small');
  mainContent.classList.toggle('main-content_large')
}

Using JavaScript, apply a click event to the button. When the button is clicked, the ‘sidebar_small’ class is added to the sidebar and the ‘main-content_large’ class is added to the main-content element. This toggle effect adds and removed both classes when the button is clicked

The full tutorial is available in this pen.

We’ve come to the end of this tutorial on creating a collapsible sidebar with Javascript. I hope you found it useful. If you did, share a few claps and follow me on Twitter or Medium. You can also leave your feedback as comments in the comment section.

Till next time, keep creating.