Patch Panel displays the corresponding panel for an item beneath the row it was clicked, regardless of items per row, width of items, or number of rows.
First, include the path to the file, remember to include jQuery beforehand.
<script src=/path/to/jQuery.min.js"><script>
<script src=/path/to/patchpanel.min.js"><script>Patch Panel works on the parent container of a group of items, buttons, and panels.
<div class="patch-container">
// Example of the item itself being the button, as seen above.
<div class="patch-item patch-button" data-patch-panel="1">...</div>
<div class="patch-panel" data-patch-panel="1">...</div>
// Example of the button being inside the item
<div class="patch-item">
<a class="patch-button" data-patch-panel="2">View More</a>
</div>
<div class="patch-panel" data-patch-panel="2">...</div>
...
</div>There are four different components that make up Patch Panel.
.patch-item
Place this class on all child items that make up the grid, these are the elements that will be shown.
.patch-panel
Place this class on all child items that are panels, all panels will be hidden on initialization.
.patch-button
Place this class on that element you want to use to trigger.
data-patch-panel
Place this data attribute along with a unique identifier on both your patch-button and your patch-panel, this is what ties the two together.
All sizing of items is handled by your CSS.
.patch-panel {
display: none;
}
.patch-item {
height: 200px;
width: 100%;
}
@media only screen and (min-width : 992px) {
.patch-item {
width: 50%;
}
}$('.patch-container').patchpanel({
// Changes the default button selector of ".patch-button"
buttonSelector: '.grid-button',
// Changes the default item selector of ".patch-item"
itemSelector: '.grid-item',
// Changes the default panel selector of ".patch-panel"
panelSelector: '.grid-panel'
// Changes the speed of the collapse animation, default is 300(ms)"
toggleSpeed: 600
});