Sliding Panels

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

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.

If you are using the SCSS version of the component (available for CodyFrame v3 and v4), you can change the number of projects editing the $s-panels-projects variable and removing 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
  });
}

Categories

• Content and Layout > Gallery
• Content and Layout > Intro
• Navigation > Misc

Bug report & feedback

Component Github page ↗