WordPress Administer

Affordable WordPress Design

Bespoke Design

Mobile Friendly

A Hosted Solution

How We Work

Package To Suit Your Budget

Premium Theme & Plugins

SEO Ready

Design Showcase

WordPress Administer

No worrying about your website

A Plan To Suit Your Budget

Everything You Expect

Security, Backups And More

Answers To Lots Of Questions

Covers Plans, Support & More

Detailed Information

All Plan Features Explained

Blog Post

Slide-in Sidebar

Slide-in Sidebar
Categories: Divi Tutorials

The official Divi group on Facebook is an almost never-ending source of ideas for tutorials as people ask how something can be achieved using the Divi Theme/Builder.

This tutorial came about when someone asked how you could create a similar page to the Atomic team page, where a sidebar slides in when you click on one of the team members - see the image below to see how that looked.

Initial thoughts on the post were around using pop-ups for the member details as the slide-in sidebar on that page dynamically loaded the sidebar content. I was curious to see if there was a way this could be done using content from the page, making it easier to design the entire page and not be reliant on a pop-up plugin to create this effect.

I'm pleased to say that I managed to create something very similar with some CSS and a little bit of JavaScript, taking into account the following requirements I set myself:.

  1. Use content from the current page instead of dynamically loading content
  2. Add an overlay over the rest of the page content so that they sidebar is highlighted
  3. Close the sidebar either by clicking outside of it or using the close icon.
  4. When the sidebar is closed, remove the "#open" part of the URL that is added when the sidebar is opened

Preview

Before I get into the detail of the slide-in sidebar, here's a preview of what the effect will look like once I'm done:

Creating the content

1. Create the basic page layout

Create the basic page layout using simple sections, rows, and modules and style them to get the look/feel you want - I'm starting with just a single person here to start with. I won't go into detail about styling this bit as that's not really an important part of this tutorial.

Background 1 add row

2. Creating the sidebar content

Add a section to be used as the sidebar content. Again, what content you use or how you style it is up to you so I won't go into detail about that, but, you will need to add an icon module so that it can be used as the trigger to close the sidebar. More on this later.

Background 1 add text module

3. Set the sidebar content width

Open the sidebar contents section, select the Design tab and open the Sizing toggle. Using the responsive settings set the Max Width as follows:

  • Desktop: 750px
  • Tablet: 100%
  • Phone: 100%

Obviously, the current page looks nothing like what we want as the sidebar content is visible below the main page content. We'll fix this with a little bit of CSS shortly.

Background 1 column 1 class name

4. Set the section admin name

Open the sidebar contents section, open the Admin Label toggle and enter a label that makes it easy to determine what the section is being used for. Here I've used "Slide-in sidebar content Joe Bloggs".

Background 1 column 1 class name

5. Add required classes to the sidebar content section

Open the section settings, select the Advanced tab, open the CSS ID & Classes toggle and add the following classes:

  • slide_in_sidebar_content_trigger_{number}
  • scroll_trigger_slide_in
  • exit_intent_slide_in

where {number} is the number of the trigger, e.g. 1 for the first person's sidebar, 2 for the second person's sidebar etc.

Background 1 column 1 class name

6. Add required classes to the sidebar content close icon

Open the icon settings, select the Advanced tab, open the CSS ID & Classes toggle and add the following classes:

  • close_slide-in_sidebar_trigger_{number}
  • close_scroll_slide_in
  • close_exit_intent
  • trigger_{number}

where {number} is the number of the trigger, e.g. 1 for the first person's sidebar, 2 for the second person's sidebar etc.

NOTE: the {number} MUST match the {number} used in step 5 above.

Background 1 column 1 class name

7. Add required classes to the person details column

Open the column settings and the individual column settings for the column containing the person details in the page design, select the Advanced tab, open the CSS ID & Classes toggle and add the following classes:

  • sidebar_trigger
  • trigger_{number}

where {number} is the number of the trigger, e.g. 1 for the first person's sidebar, 2 for the second person's sidebar etc.

NOTE: the {number} MUST match the {number} used in step 5 above.

Background 1 column 1 class name

8. Add the link to the person details column

Open the column settings and the individual column settings for the column containing the person details in the page design, open the Link toggle and add the following Column Link URL:

  • #open
Background 1 column 1 class name

9. Add the required class to the person details section

Open the section settings, select the Advanced tab, open the CSS ID & Classes toggle and add the following class:

  • person-section
Background 1 column 1 class name

10. Add the CSS

If you are using a child theme, place the CSS into the style.css file. If you're not using a child theme, place the CSS in the Divi Theme Options Custom CSS code box.

10.1 Hide/show the Sidebar CSS

First we're going to hide the sidebar section using the following CSS:

.scroll_trigger_slide_in {
	position: fixed !important;
	right: 0px !important;
	top: 0px !important;
	left: unset !important;
	bottom: unset !important;
	transform: translateX(100%)!important;  
	transition: all .4s ease-in-out,width .2s ease-in-out,top
    .4s ease-in-out !important;
}

This will do the following:

  • Fix the position of the sidebar to the top right of the page
  • Reposition the sidebar horizontally it's full width over to the right, thus hiding it off the size of the page
  • Set the transition type and length

Next we're going to make the the sidebar visible using the following CSS:

.scroll_show_slide_in,
.exit_intent_slide_in.activate_exit_intent,
.exit_intent_slide_in_bottom.activate_exit_intent  {
	transform: translateX(0px) !important;
}

This will do the following:

  • Reposition the sidebar back to it's original position, i.e. top right

Once you've added the CSS to hide/show the sidebar content it will no longer be visible in the visual builder, obviously. To make it visible again add the following CSS as/when needed:

.et-fb .scroll_trigger_slide_in {
	transform: translateX(0px) !important;
}  

10.2 Overlay CSS

Set up the overlay using the following CSS:

.overlay {
    background: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 200;
    opacity: 0;
}

This will do the following:

  • Sets the background to black
  • Sets the overlay to have a fixed position covering the entire page
  • Sets the z-index so that it sits above the normal page content
  • Sets the overlay opacity to 0, i.e. not visible

Once you've added the CSS to create the overlay add the CSS to show the overlay when it's needed:

.overlay.show {
    opacity: .75;
}

This will do the following:

  • Set the overlay opacity to 75% so that it doesn't completely blackout the main content

10. Add the JavaScript

If you are using a child theme, place this code into a scripts.js file and remove the <script> tags at the beginning and end, ensuring you enqueue the script. If you're not using a child theme, place this in the Divi Theme Options Integrations tab Add code to the < head > of your blog code box.

<script>
// Function to get the trigger class from the list of class names
function getToggleClass(classList) {
        // Create class array by splitting the class list string
        var classArr = classList.split(" ");
      	// Loop through the class array
		for (var i = 0; i < classArr.length; i++) {
          	// If the current class has "trigger_" in it then this 
          	// is the one we want
    		if (classArr[i].indexOf("trigger_") >= 0) {
              	// Set theClass to be the current class
      			var theClass = classArr[i];
            }
		}

      	// Using theClass set the class names to be used in the 
  		// class toggle
        var toggleClassName = ".slide_in_sidebar_content_" + 
            theClass + "," + ".close_slide-in_sidebar_" + theClass;
				
  		return toggleClassName;
}

// Function to sanitise the uRL when the sidebar is closed
function sanitiseURL() {
	const url = new URL(location);
	url.href = url.href.replace("#open", "");
	history.pushState(null, document.title, url);
}

jQuery(document).ready(function(){
  	// Process the sidebar_trigger element click
    jQuery(".sidebar_trigger").click(function(){
        // Get the class list string
        var classList = this.className;
      	var toggleClassName = getToggleClass(classList);

      	// Toggle the active state class to show the slide in bar
        jQuery(toggleClassName).toggleClass("activate_slide_in");

      	// Define the overlay div
	    var overlay = jQuery('<div class="overlay show"> </div>');
		// Append the overlay div to the person-section section
      	overlay.appendTo(".person-section");
      
      	// Stop the main content from scrolling
      	var html = jQuery('html');
      	html.css('overflow', 'hidden');
    
    });
});
	
jQuery(document).ready(function(){
    jQuery(".close_scroll_slide_in").click(function(){
        // Get the class list string
        var classList = this.className;
      	var toggleClassName = getToggleClass(classList);
		// Toggle the active state class to show the slide in bar
      	jQuery(toggleClassName).removeClass("activate_slide_in");

      	// When clicked #open is added to the URL. Clean this up 
      	// on close
      	sanitiseURL();
      
	    // Remove the overlay div
    	jQuery(".overlay").remove();
      
      	// Allow the main content to scroll again
      	var html = jQuery('html');
      	html.css('overflow', 'auto');

    });
});

jQuery(document).on("click", function (event) {
  	// If the target is not the container or a child of the 
  	// container, then process the click event for outside of the 
  	//container.
  	if (jQuery(event.target).closest(".scroll_trigger_slide_in")
    .length === 0) {
		// Find the element with the class activate_slide_in and 
    	//  remove that class
    	jQuery(document).find('.activate_slide_in')
    	.removeClass("activate_slide_in");

    	// When clicked #open is added to the URL. Clean this up on 
    	// close
    	sanitiseURL();

    	// Remove the overlay div
    	jQuery(".overlay").remove();
      
    	// Allow the main content to scroll again
    	var html = jQuery('html');
    	html.css('overflow', 'auto');
  	}
});
</script>

Okay, so there's a bit of JavaScript here so I'll go over what the different blocks are doing.

First, there are a couple of helper functions that are used in a few places in the rest of the code, making sure we don't just copy the same code over and over again.

The first function creates the class names that need to be used when we try and toggle the class on the sidebar to make it show or hide. This takes the list of classes for the element that was clicked, iterates over them to find the one that has "trigger_" in it. It then uses this to create the toggle class name so that we target the correct sidebar content.

The second function cleans up the page URL by replacing "#open" with an empty string, therefore removing it from the URL string.

The next block handles opening the sidebar. This gets the classes associated with the element that was clicked - calling the helper function to create the toggle class name - and adds the "activate_slide_in" class to the correct sidebar content section. It then adds the overlay to the page and stops the main page content from scrolling.

The next block handles closing the sidebar. Again, it gets the classes associated with the element that was clicked - calling the helper function to create the toggle class name - and removes the "activate_slide_in" class from the correct sidebar content section. It then removes cleans up the page URL using the helper function, removes the overlay, and finally allows the main page content to scroll again.

The final block handles closing the sidebar when a user clicks outside of it. It first checks to make sure that the click event wasn't on the side bar content, and if it wasn't it finds the element on the page with the "active_slide_in" class and removes the class, closing the sidebar. We have to do it this way as we currently don't know which of the person sections could be active. It then removes cleans up the page URL using the helper function, removes the overlay, and finally allows the main page content to scroll again.

And We're Done

By using trigger_{number} in the classes the solution above can handle any number of person sections for any number of sidebars. If you want to add a new person, copy the main page content column and the sidebar content section, changing the classes to have a unique trigger_{number} - four classes in total. Once you've done that the new sidebar should just work.

Obviously, this solution could be used for anything you wanted to show using a slide-in sidebar as everything is designed using the Divi Builder so there is absolutely no restrictions on what you could add to the sidebar contents. You could also use any module to trigger the sidebar slide-in as well as it only needs to have a link (all modules can have a link) and the classes added (all modules can have custom classes added).