Learn how to create Smooth Slide-in Sidebar Section with custom CSS and jQuery!

A sidebar section is a great and useful tool but it can also distract the user from the main content of your page. Especially when it takes a lot of the website’s space.

That’s why in this tutorial, I will show you how to use Divi Builder to create a slide-in sidebar that will show up only after you click on the button. 

We are going to use the custom CSS and some jQuery code to achieve that. Watch my step-by-step walkthrough video and copy the code we used below!

If you’re our subscriber feel free to download the JSON file!

Step 1. Add a section in the Divi Builder 

In the Advanced tab of the section setting, we need to change the position of the sidebar section to “Fixed”. We also need to include a custom CSS class. The CSS class used in the demo example is called dl-slide-sidebar.

The max-width of the section is set to 300px and if there is a lot of content, make sure to change the horizontal overflow value to “scroll” (in the Advanced tab of the section settings).

Step 2. Add the Close Button inside the Sidebar

To create an X close button we used the Blurb module added in the sidebar section. The module does not have a title, nor any content. We enabled the icon and changed the width, height, and the icon size to 50px. To make sure the sidebar section slides out upon clicking on the Blurb – we’ve added a custom CSS class of dl-close so that we can target this element in our JavaScript code.

Step 3. Add the Button trigger

We are using a standard Divi Button with a custom CSS class of dl-btn-toggle. The button text will be changed dynamically, but on the page load it is set to “Open”.

Add the CSS Styles!

Here is the CSS code we used to hide the sidebar only if not in the Visual Builder and to show it when it gets a new CSS class of is-opened. The “translateX” value needs to match the section width. The last bit adds a hand cursor to the Blurb module: 

body:not(.et-fb) .dl-slide-sidebar {
  transform:translateX(300px);
}
body:not(.et-fb) .dl-slide-sidebar.is-opened {
  transform:translateX(0);
}
.dl-slide-sidebar.has-transition {
  transition:.7s;
}
.dl-close {
  cursor:pointer;
}

Finally, the jQuery magic!

This is the final jQuery code. To understand what it does – please watch the video 😉

jQuery(document).ready(function($) {
	var dl_ButtonToggle = $('.dl-btn-toggle');
  	var dl_SlideSidebar = $('.dl-slide-sidebar');
  	
  	function dl_SidebarCheck() {
      if (dl_ButtonToggle.hasClass('is-opened')) {
        dl_ButtonToggle.text('Close');
      }
      else {
        dl_ButtonToggle.text('Open');
      }
    }
  
  
  	dl_ButtonToggle.click(function(e) {
      e.preventDefault();
      dl_ButtonToggle.toggleClass('is-opened');
      dl_SlideSidebar.toggleClass('is-opened');
      dl_SlideSidebar.addClass('has-transition');
      dl_SidebarCheck();
    })
	
  	$('.dl-close').click(function() {
      $('.is-opened').removeClass('is-opened');
      dl_SidebarCheck();
    })
});

What do you think?

Feel free to use it on your website and do not hesitate to show us the final result! We are eager to see the effects of your work!

We always appreciate your feedback, so please share your opinion with us in the comments!