Development Tips

Logi Tutorial: How to Use the Slide-In Panel

By John Sweazen
Share on LinkedIn Tweet about this on Twitter Share on Facebook

This is the second blog in our tutorial series on 10 of the best solutions from Logi’s Expert-on-Demand (EOD) team. Recently, we discussed Animate.CSS and HeroSlider, which each allow you to add animated effects to your projects. Now, I want to introduce you to another animation solution that is a refreshing replacement for the pop-up box: the Slide-in Panel.

>> Related Tutorial: Adding Animated Effects to Your Projects <<

We’ve all grow tired of the pop-ups assaulting us smack dab in the middle of the screen, right? Enter the slide-in panel, which gently glides in from the side and disappears immediately when the user touches anywhere else on the screen.

How to Use the Slide-In Panel

Utilizing CSS transitions and jQuery, the slide-in panel lends itself especially well to mobile devices—which are where traditional pop-up boxes typically work poorly and are most disruptive to the user experience. The slide-in panel is also useful because:

  • It’s unobtrusive. Users will appreciate its sleekness and the absence of distracting pop-ups.
  • It works well on any device. This is a simple way to turn up the functionality of your website, wherever it is displayed.

For our example, we’re using a visualization showing four bars (Figure 1). Just like a pop-up window, we can modify the information displayed by clicking on any bar and watching our panel “slide in” from the side with more detailed information (Figure 2).


The Slide-In Panel can hold any HTML or Logi element and can open to the right or left. Follow these steps to implement it in your website:

  1. Include the Slide-In Panel Header Scripts and CSS (bundled in the SlideInPanelHeader Scripts Shared Element).
  2. Include the Slide-In Panel Footer Script.
  3. Include the Division (divLeftPanel), which contains the content and header for the Slide-In Panel. If multiple panels are required, give each a unique ID value and modify the Footer slidepanel script appropriately.
  4. Include the divInfoButton, which is used to trigger the panel.

See the slide-in panel in action >

View demos of other solutions recommended by the EOD team >

Stay tuned to the Logi Blog for more Expert-On-Demand solutions in the following weeks.

Originally published April 3, 2018; updated on September 12th, 2019

About the Author

John Sweazen is an Expert-On-Demand Solutions Consultant with Logi Analytics. He has more than 20 years of experience in the IT industry and helping to solve client issues.