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.
http://patchpanel.alecortega.com
// Bower
bower install patch-panel
// NPM
npm install patch-panel
| 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. |
$(element).patchpanel({
toggleSpeed: 600
});- 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;
}- 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.
jQuery 2.1
Copyright (c) 2015 Alec Ortega
Licensed under the MIT license.