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

Licensed under the MIT license.

alecortega/patch-panel