This guide explains how to create a slide-out panel that opens and closes with a button click. By default, it is visible only on tablet and mobile devices, but you can easily adjust the CSS to enable it on desktop as well.
The Alpha Ecommerce Theme uses this technique for its filter area. On mobile screens, the traditional left sidebar is converted into a far more user-friendly, touch-optimized filtering experience.
Create your block structure
Basically, you only need a button and a container, such as a Kadence Section block. Make sure that the button is placed outside of the container. For an enhanced user experience, you can also add a button or icon block inside the container to display an “X” or another symbol that clearly indicates a close action.
The rest is handled by the ID and class assignment as well as the JavaScript and CSS code of the Alpha theme running in the background.
Add IDs and Classes to your blocks
To use this functionality, you need three specific elements on your page, each correctly named:
A. The Filter Container (The Section)
Select the Kadence section block that you want to slide out. Go to the block settings under Advanced > HTML Anchor.
Assign the ID slide-out-container to this container.
B. The Toggle Button
Select the parent element (the wrapper) of your Kadence Advanced Button block. Go to the block settings under Advanced > HTML Anchor.
Assign the ID toggle-button to this container. This is the main button that triggers the functionality.
C. The Close Button (Optional but Recommended)
Select a button or icon block inside the filter container. Go to the block settings under Advanced > Additional CSS Classes.
Add the class close-button.