jQuery: Simple Slide Panel

jQuery: Simple Slide Panel

Here is another quick snippet that demonstrates how to use jQuery to create a simple slide in panel. Off screen panels are useful for all sorts of purposes: navigation links, instructions or contact forms. It gives you a method to de-cluttering the interface while adding interactivity.

Below you’ll see how five lines of jQuery makes this possible, I’ll also include the vanilla JavaScript version. This way, in case you are unfamiliar with jQuery, you can see how the library makes adding these types of features to a website more concise.

Note: I’ve included jQuery, Bootstrap & FontAwesome icons in the Codepen below. You will need to bring these into your project to have the same results.

HTML & CSS

The HTML & CSS in this project are very basic element structure and styles. The HTML consists of an anchor tag which will action the panel to slide into view, and a div container which serves as the element being targeted by the jQuery script. The panel is located off screen by default by setting it’s position property to absolute and using the left property to move it off screen.

<a id="slide-button" class="menu-button btn mb-2" href="#"><i class="fas fa-map-marker-alt"></i> Menu</a>

<div id="local-navbar" class="local-navbar card card-body"> 
               
   <a href="#" class="close-icon"><i class="fas fa-caret-left"></i></a>

   <a href="#running-routes" class="local-navbar-icon"><i class="fas fa-map-marker-alt"></i> Running Routes</a>

   <a href="#group-runs" class="local-navbar-icon"><i class="fas fa-map-marker-alt"></i> Group Runs</a>

   <a href="#running-clubs" class="local-navbar-icon"><i class="fas fa-map-marker-alt"></i> Running Clubs</a>

   <a href="#swimming-pools" class="local-navbar-icon"><i class="fas fa-map-marker-alt"></i> Swimming Pools</a>

</div>

.menu-button {
  background-color: #5661B3;
  color: #E6E8FF;
}

.menu-button:hover {
  color: #E6E8FF;
  background-color: #6574CD;
}

.local-navbar {
  background-color: #191E38;
  border-radius: 0 .25rem .25rem 0;
  display: flex;
  flex-direction: column;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1.5rem;
  position: absolute;
  left: -350px;
  transition: all .24s ease-in;
  width: 250px;
}

.show {
  left:0;
}

.close-icon {
  line-height: 0;
  position: absolute;
  top: 0;
  right: 0;
}

.close-icon i {
  color: #B2B7FF;
  font-size: 2rem;
}

.close-icon i:hover {
  color: #E6E8FF;
}

.local-navbar-icon {
  background-color: #2F365F;
  border-radius: .125rem;
  color: #E6E8FF;
  margin-bottom: .5rem;
  padding: .75rem 1.25rem;
  text-decoration: none;
}

.local-navbar-icon:hover {
  background-color: #5661B3;
  color: #fff;
  text-decoration: none;
}

jQuery

The first line simply sets up jQuery and makes the code within the function available only after the document has loaded. Next, jQuery adds an event listener to the elements that have an ID of slide-button or close-icon and will detect a click on either of these elements. In our case, the element that has the ID of slide-button is our menu button anchor tag, and the element that has an ID of close-icon is the anchor tag inside the panel.

Once clicked, the show css class is added to the html element that has an ID of local-navbar which is the containing div of our panel. The show class use the css property left to bring the panel back into view. Using the jQuery method toggleClass does the work here, determining whether or not the local-navbar element has a class of show, if it does it removes it, if it doesn’t it adds it.

// jQuery Version
jQuery(document).ready( function($) {
    $('#slide-button, .close-icon').click( function() {
        $('#local-navbar').toggleClass('show');
     });
});

If you review the vanilla JavaScript version, you’ll see the same thing play out, but in a few more steps, with the extra code to identify the elements and apply the conditional logic. This illustrates a simple example of how less code can result in the same effect, and as you can probably imagine, saves time when working with large projects.

//Vanilla JavaScript Version
let menu_button = document.getElementById('slide-button');
menu_button.addEventListener( 'click', show_menu);
function show_menu() {
    let menu_panel = document.getElementById('local-navbar');
    if(menu_panel.classList.contains('show')) {
        menu_panel.classList.remove('show');
    } else {
        menu_panel.classList.add('show');     
    }
}

Working Example on Codepen

See the Pen Simple jQuery Slide Panel by colbyalbo (@colbyalbo) on CodePen.