Patch Panel

Patch Panel makes responsive grid + panel layouts possible by displaying the corresponding panel for an item beneath the row it was clicked, regardless of items per row, width of items, or number of rows.

Demo

http://patchpanel.alecortega.com

Package Managers

// Bower
bower install patch-panel

// NPM
npm install patch-panel

Settings

| Option | Type | Deault | Description | |--------|------|--------|-------------| |buttonSelector | string | '.patch-button' | Changes the selector that triggers the panel animation.| |itemSelector | string | '.patch-item' | Changes the selector for all child items that make up the grid (items that are shown).| |panelSelector | string | '.patch-panel' | Changes the selector for all panel items (panels are automatically hidden).| |toggleSpeed | int | 300 | Changes the speed at which panels are animated.|

Initialization Example

$(element).patchpanel({
  toggleSpeed: 600
});

Gotchas

• All elements are automatically hidden upon initialization with jQuery. Since there's a delay between the DOM loading and javascript initializing, the panels may flicker from visible to hidden. You can avoid this by placing the following in your stylesheet:

.patch-panel {
  display: none;
}

Future Updates

• Better handling of events so that only two panels are triggered at any one time.
• Callback events for panel triggered, and panel finished collapsing.
• Handling of items of multiple heights.
• Add super simple stylesheet that adds proper styling.

Dependencies

jQuery 2.1

License

Copyright (c) 2015 Alec Ortega

Licensed under the MIT license.