Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bqworks/grid-accordion-jquery
jQuery plugin that combines the functionality of a grid with that of an accordion.
https://github.com/bqworks/grid-accordion-jquery
grid-accordion jquery plugin responsive-accordion responsive-grid
Last synced: 3 months ago
JSON representation
jQuery plugin that combines the functionality of a grid with that of an accordion.
- Host: GitHub
- URL: https://github.com/bqworks/grid-accordion-jquery
- Owner: bqworks
- License: mit
- Created: 2021-07-23T15:24:44.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-20T15:53:48.000Z (about 2 years ago)
- Last Synced: 2024-11-01T12:04:21.263Z (3 months ago)
- Topics: grid-accordion, jquery, plugin, responsive-accordion, responsive-grid
- Language: JavaScript
- Homepage:
- Size: 467 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/grid-accordion)
[](https://github.com/bqworks/grid-accordion-jquery/blob/master/LICENSE)
[](https://github.com/bqworks/grid-accordion-jquery/actions/workflows/build.yml)
[](https://github.com/bqworks/grid-accordion-jquery)
# [Grid Accordion - jQuery plugin](https://bqworks.net/grid-accordion/) #
A responsive and touch-enabled jQuery grid accordion plugin that combines the functionality of a grid with that of an accordion.
>The Grid Accordion is also available as a [WordPress plugin](https://wordpress.org/plugins/grid-accordion/).
Main features:
* modular architecture
* responsive
* touch-swipe
* CSS3 transitions
* animated layers (and static)
* deep linking
* lazy loading
* retina-enabled
* video support
* JavaScript breakpoints
Check the plugin's [presentation page](https://bqworks.net/grid-accordion/) for examples and more details of the available features.
## Getting started ##
### 1. Get a copy of the plugin ###
You can fork or download the plugin from GitHub, or you can install it through `npm`.
```
$ npm install grid-accordion
```
### 2. Load the required files ###
Inside the page's head tag include the accordion's CSS file.
```html
```
In the page's footer, just before </body>, include the required JavaScript files.
```html
```
You can also load the CSS and JS code from unpkg.com:
```html
```
### 3. Create the HTML markup ###
```html
```
The structure you see in the code above (grid-accordion > ga-panels > ga-panel) as well as the class names used are required.
More about the supported content (i.e., layers, html, video) in the [Modules](docs/modules.md#modules) doc.
### 4. Instantiate the accordion ###
```html
jQuery(document).ready(function($) {
$('#my-accordion').gridAccordion();
});
```
Grid Accordion has 40+ customizable options. More about this in the [JavaScript API](docs/api.md#javascript-api) doc.
## Detailed usage instructions ##
* [JavaScript API](docs/api.md#javascript-api)
* [1. Properties](docs/api.md#1-properties)
* [2. Public Methods](docs/api.md#2-public-methods)
* [3. Callbacks](docs/api.md#3-callbacks)
* [Modules](docs/modules.md#modules)
* [1. Touch Swipe](docs/modules.md#1-touch-swipe)
* [2. Autoplay](docs/modules.md#2-autoplay)
* [3. Mouse Wheel](docs/modules.md#3-mouse-wheel)
* [4. Keyboard](docs/modules.md#4-keyboard)
* [5. Layers](docs/modules.md#5-layers)
* [6. Lazy Loading](docs/modules.md#6-lazy-loading)
* [7. Retina](docs/modules.md#7-retina)
* [8. Deep Linking](docs/modules.md#8-deep-linking)
* [9. Swap Background](docs/modules.md#9-swap-background)
* [10. Smart Video](docs/modules.md#10-smart-video)
* [11. XML](docs/modules.md#11-xml)
* [12. JSON](docs/modules.md#12-json)
## Support ##
If you found a bug or have a feature suggestion, please submit it in the [Issues tracker](https://github.com/bqworks/grid-accordion-jquery/issues).
## License ##
The plugin is available under the MIT license.