New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

zebra_accordion

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

zebra_accordion - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

CHANGELOG.md
dist/zebra_accordion.css
dist/zebra_accordion.min.css
dist/zebra_accordion.min.js
dist/zebra_accordion.src.js
examples/examples.css
examples/examples.js
examples/README.md
src/zebra_accordion.scss
src/zebra_accordion.src.js

28

package.json
{
"name": "zebra_accordion",
"version": "1.2.4",
"main": "public/javascript/zebra_accordion.js",
"homepage": "https://github.com/stefangabos/Zebra_Accordion",
"description": "A tiny, easily configurable, fully customizable, cross-browser accordion jQuery plugin",
"author": {

@@ -10,3 +8,4 @@ "name": "Stefan Gabos",

},
"description": "A tiny, easily configurable, fully customizable, cross-browser accordion jQuery plugin",
"homepage": "https://github.com/stefangabos/Zebra_Accordion",
"main": "dist/zebra_accordion.min.js",
"repository": {

@@ -16,6 +15,4 @@ "type": "git",

},
"bugs": {
"url": "https://github.com/stefangabos/Zebra_Accordion/issues",
"email": "contact@stefangabos.ro"
},
"license": "LGPL-3.0",
"version": "1.2.5",
"keywords": [

@@ -28,10 +25,19 @@ "jquery-plugin",

],
"license" : "LGPL-3.0",
"bugs": {
"url": "https://github.com/stefangabos/Zebra_Accordion/issues",
"email": "contact@stefangabos.ro"
},
"devDependencies": {
"grunt": "*",
"grunt-cli": "*",
"grunt-contrib-copy": "*",
"grunt-contrib-jshint": "*",
"grunt-contrib-uglify": "*",
"grunt-cli": "*",
"grunt-contrib-watch": "*"
"grunt-contrib-watch": "*",
"grunt-eslint": "*",
"grunt-newer": "*",
"grunt-notify": "*",
"grunt-sass": "*",
"time-grunt": "*"
}
}

265

README.md

@@ -1,53 +0,75 @@

##Zebra_Accordion
<img src="https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png" alt="zebrajs" align="right">
####A small-footprint (3 KB minified), easily configurable, fully customizable, cross-browser accordion jQuery plugin
# Zebra_Accordion
Zebra_Accordion is a tiny (3KB minified) accordion jQuery plugin. It transforms a basic definition list, without requiring any other specific markup, into a small-footprint, easily configurable, fully customizable, cross-browser accordion widget, useful for better organizing larger groups of content.
*A tiny (3 KB minified, 1.3KB gzipped), easily configurable, fully customizable, cross-browser accordion jQuery plugin*
##Features
[![npm](https://img.shields.io/npm/v/zebra_accordion.svg)](https://www.npmjs.com/package/zebra_accordion) [![Total](https://img.shields.io/npm/dt/zebra_accordion.svg)](https://www.npmjs.com/package/zebra_accordion) [![Monthly](https://img.shields.io/npm/dm/zebra_accordion.svg)](https://www.npmjs.com/package/zebra_accordion) [![License](https://img.shields.io/npm/l/zebra_accordion.svg)](https://www.npmjs.com/package/zebra_accordion)
- no additional markup required other than a basic definition list;
- appearance is easily customizable through CSS;
- works with both fixed and fluid (responsive) layouts;
- can be configured so that only a single tab can be expanded at a time, or so that all tabs may be expanded/collapsed;
- can be configured so that tabs expand on mouse over;
- when, after expanding a tab, part of its content is outside the viewport, it automatically scrolls the browser’s window so that the tab’s content is visible;
- callback functions can be used for further customizations;
Zebra_Accordion is a tiny (3KB minified, ~1.3KB gzipped) accordion plugin for jQuery. It transforms a basic definition list,
without requiring any specific markup, into a small-footprint, easily configurable, fully customizable, cross-browser accordion widget, useful for better organizing larger groups of content.
## Support the development of this project
[![Donate](https://img.shields.io/badge/Be%20kind%20%7C%20Donate%20$3%20with%20-%20PayPal%20-brightgreen.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NBM9XKB7XAB5L)
## Features
- no additional markup required other than a basic definition list
- no default style allowing you to fully customize it to suit your needs
- works with responsive layouts
- allows for a single expanded tab at a time, or for any number of tabs to be expanded/collapsed
- allows for tabs to expand on mouse over, not just on click
- if an expanded tab's content is not in the viewport it automatically scrolls the browser window so that the content is visible
- callback functions can be used for further customizations
- works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)
##Requirements
## Requirements
**Zebra_Accordion** has no dependencies other than jQuery 1.5.2+
Zebra_Accordion has no dependencies other than jQuery 1.7.0+
##How to use
## Installation
Zebra_Accordion is available as a [Bower package](http://bower.io/). To install it use:
Zebra_Accordion is available as a [npm package](https://www.npmjs.com/package/zebra_accordion). To install it use:
```
bower install zebra_accordion
npm install zebra_accordion
```
Zebra_Accordion is also available as a [npm package](https://www.npmjs.com/). To install it use:
Zebra_Accordion is also available as a [Bower package](http://bower.io/). To install it use:
```
npm install zebra_accordion
bower install zebra_accordion
```
Load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
## How to use
First, load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
```html
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-1.12.0.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.2.1.js"><\/script>')</script>
```
Load the Zebra_Accordion plugin
Load the Zebra_Accordion jQuery plugin:
```html
<script type="text/javascript" src="path/to/zebra_accordion.js"></script>
<script src="path/to/zebra_accordion.min.js"></script>
```
Load the plugin’s stylesheet file
Alternatively, you can load Zebra_Accordion from [JSDelivr CDN](https://www.jsdelivr.com/) like this:
```javascript
// for the most recent version
<script src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Accordion/dist/zebra_accordion.min.js"></script>
// for a specific version
<script src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Accordion@1.2.5/dist/zebra_accordion.min.js"></script>
// replacing "min" with "src" will serve you the non-compressed version
```
Load the style sheet file
```html
<link rel="stylesheet" href="path/to/zebra_accordion.css" type="text/css">
<link rel="stylesheet" href="path/to/zebra_accordion.min.css" type="text/css">
```

@@ -64,2 +86,193 @@

```
Configuration options and demos on the **[project's homepage](http://stefangabos.ro/jquery/zebra-accordion/)**
## Configuration options
## Properties
<table width="100%">
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"><code>animate_opacity</code></td>
<td valign="top"><em>boolean</em></td>
<td valign="top">TRUE</td>
<td valign="top">Should a tab's opacity be also animated when expanding/collapsing?</td>
</tr>
<tr>
<td valign="top"><code>collapsible</code></td>
<td valign="top"><em>boolean</em></td>
<td valign="top">FALSE</td>
<td valign="top">
When set to TRUE it indicates that all tabs can be collapsed; if set to FALSE, an expanded tab can be collapsed only by expanding another tab.
</td>
</tr>
<tr>
<td valign="top"><code>expanded_class</code></td>
<td valign="top"><em>string</em></td>
<td valign="top">Zebra_Accordion_Expanded</td>
<td valign="top">
The name of the class to append to an expanded tab's associated <em>title</em> element.<br>
Use it to customize the aspect of expanded tabs.
</td>
</tr>
<tr>
<td valign="top"><code>hide_speed</code></td>
<td valign="top"><em>integer</em></td>
<td valign="top">400</td>
<td valign="top">
The speed (in milliseconds) to use when collapsing a tab.
</td>
</tr>
<tr>
<td valign="top"><code>scroll_speed</code></td>
<td valign="top"><em>integer</em></td>
<td valign="top">600</td>
<td valign="top">
If an tab's content is not entirely visible once it is expanded, the browser window will be scrolled so that the entire content is visible (if is possible).<br>
This value represents the speed (in milliseconds) used for scrolling browser window to the right position.
</td>
</tr>
<tr>
<td valign="top"><code>show_speed</code></td>
<td valign="top"><em>integer</em></td>
<td valign="top">400</td>
<td valign="top">
The speed (in milliseconds) to use when expanding a tab.
</td>
</tr>
<tr>
<td valign="top"><code>show</code></td>
<td valign="top"><em>mixed</em></td>
<td valign="top">0</td>
<td valign="top">
The index (0 based) of the tab to be expanded by default.<br>
The value of this property can also be boolean FALSE, indicating that all tabs should be collapsed by default.<br>
If the value of the <strong>collapsible</strong> property is TRUE, the value of this property can also be boolean TRUE, indicating that all tabs should be expanded by default. In this case, you can also provide <em>an array</em> of indexes to be expanded by default.
</td>
</tr>
<tr>
<td valign="top"><code>toggle_on_mouseover</code></td>
<td valign="top"><em>boolean</em></td>
<td valign="top">FALSE</td>
<td valign="top">
Set this to TRUE if tabs should be expanded when hovering the mouse over their associated <em>titles</em>.<br><br>
<blockquote>If the <strong>collapsible</strong> property is TRUE, this property will always be considered as FALSE!</blockquote>
</td>
</tr>
</tbody>
</table>
## Events
<table width="100%">
<thead>
<tr>
<th>Event</th>
<th width="100%">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"><code>onBeforeClose</code></td>
<td valign="top">
Event fired <strong>before</strong> a tab is <strong>collapsed</strong><br>
The callback function takes 3 arguments:
<ul>
<li>the tab's position in the accordion (0 based)</li>
<li>the associated title element, as a jQuery object</li>
<li>the tab, as a jQuery object</li>
</ul>
</td>
</tr>
<tr>
<td valign="top"><code>onBeforeOpen</code></td>
<td valign="top">
Event fired <strong>before</strong> a tab is <strong>expanded</strong><br>
The callback function takes 3 arguments:
<ul>
<li>the tab's position in the accordion (0 based)</li>
<li>the associated title element, as a jQuery object</li>
<li>the tab, as a jQuery object</li>
</ul>
</td>
</tr>
<tr>
<td valign="top"><code>onClose</code></td>
<td valign="top">
Event fired <strong>after</strong> a tab is <strong>collapsed</strong><br>
The callback function takes 3 arguments:
<ul>
<li>the tab's position in the accordion (0 based)</li>
<li>the associated title element, as a jQuery object</li>
<li>the tab, as a jQuery object</li>
</ul>
</td>
</tr>
<tr>
<td valign="top"><code>onOpen</code></td>
<td valign="top">
Event fired <strong>after</strong> a tab is <strong>collapsed</strong><br>
The callback function takes 3 arguments:
<ul>
<li>the tab's position in the accordion (0 based)</li>
<li>the associated title element, as a jQuery object</li>
<li>the tab, as a jQuery object</li>
</ul>
</td>
</tr>
</tbody>
</table>
## Methods
### `show(index, [noFx = FALSE], [noScroll = FALSE])`
Expands a tab.
#### Arguments
`index` - the 0-based index of the tab to expand
`noFx` - *(optional)* - if set to TRUE, the tab will be instantly expanded without animation.
Default is FALSE.
`noScroll` - *(optional)* - if set to TRUE, the browser window will not be scrolled to the newly expanded tab.
Default is FALSE.
```javascript
var myAccordion = new $.Zebra_Accordion($('#accordion'));
// expand the third tab
myAccordion.show(2);
```
### `hide(index, [noFx = FALSE])`
Expands a tab.
#### Arguments
`index` - the 0-based index of the tab to collapse
`noFx` - *(optional)* - if set to TRUE, the tab will be instantly collapsed without animation.
Default is FALSE.
```javascript
var myAccordion = new $.Zebra_Accordion($('#accordion'));
// collapse the first tab
myAccordion.hide(0);
```
## Demo
See the [demos](http://stefangabos.github.io/Zebra_Accordion/)
changelog.txt
documentation.txt
examples/libraries/index.html
examples/libraries/syntaxhighlighter/index.html
examples/libraries/syntaxhighlighter/LGPL-LICENSE
examples/libraries/syntaxhighlighter/MIT-LICENSE
examples/libraries/syntaxhighlighter/public/css/index.html
examples/libraries/syntaxhighlighter/public/css/shCoreDefault.css
examples/libraries/syntaxhighlighter/public/index.html
examples/libraries/syntaxhighlighter/public/javascript/index.html
examples/libraries/syntaxhighlighter/public/javascript/shBrushCss.js
examples/libraries/syntaxhighlighter/public/javascript/shBrushJScript.js
examples/libraries/syntaxhighlighter/public/javascript/shBrushXml.js
examples/libraries/syntaxhighlighter/public/javascript/shCore.js
examples/public/css/index.html
examples/public/css/reset.css
examples/public/css/style.css
examples/public/index.html
examples/public/javascript/index.html
examples/public/javascript/jquery-1.12.0.js
examples/public/javascript/main.js
index.html
public/css/index.html
public/css/zebra_accordion.css
public/index.html
public/javascript/index.html
public/javascript/zebra_accordion.js
public/javascript/zebra_accordion.src.js
readme.txt
examples/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc