🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Sliding Panels

A group of sections that expand to reveal additional content, or hide to show the navigation.

View Demo


All components are based on CodyFrame.

How to

The Sliding Panels template is used to display a gallery of project previews that expand on click to reveal more project information. When clicking on the menu button, the panels slide out to reveal the navigation.

To change the number of projects, edit the $s-panels-projects variable and removed the extra projects from the HTML structure.

$s-panels-projects: 4;

Each time a new project is selected, the custom slidingPanelOpen event is emitted (you can use it to init the project content):

var slidingPanels = document.getElementsByClassName('js-s-panels');
if( slidingPanels.length > 0 ) {
  slidingPanels[0].addEventListener('slidingPanelOpen', function(event){
    console.log(event.detail); // this is the index of the selected project

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.