Multiple Panels with Different Styles

Initiate multiple Scotch Panels with a single call and have them each have their own properties and styles.

The HTML5 Data Attributes will override whatever you tried to initiate it with. You can do this for all of the properties (distance, direction, timing, etc.).

                
                $('.one-of-many').scotchPanel({
                    clickSelector: '.toggle-panels',
                    containerSelector: '.panel-container', // Selects the nearest matching container
                });
                
                

Peace

One

Example

Love

Two

Example

Truth

Three

Example

Power

Four

Example