https://github.com/pankajpatel/simplest-accordion
The simplest Accordion Code
https://github.com/pankajpatel/simplest-accordion
Last synced: 4 months ago
JSON representation
The simplest Accordion Code
- Host: GitHub
- URL: https://github.com/pankajpatel/simplest-accordion
- Owner: pankajpatel
- Created: 2013-01-19T16:47:07.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T11:36:26.000Z (over 1 year ago)
- Last Synced: 2024-05-02T03:09:53.606Z (about 1 year ago)
- Language: JavaScript
- Size: 34.2 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simplestAccordion Plugin
-------------------------
This plugin receives whole body as argument and processes the elements having the class `item`
The recommended Document structure for the use of Plugin code is as below
```html
Item 1
This is the content for Accordion 1
Item 2
This is the content for Accordion 2
Item 3
This is the content for Accordion 3
Item 4
This is the content for Accordion 4
```
For above HTML, the jQuery code to initialize the plugin will be:
```javascript
$(document).ready(function(){
$('.container').simplestAccordion();
})
```
The above code can be written as following when passed with the options:
```javascript
$(document).ready(function(){
$('.container').simplestAccordion('.item', '.item-data', 'active');
})
```
The CSS for the plugin is as below, you can add this in your regular CSS files and customize to fulfill oyur requirements
```css
.container {
display:block;
width: 500px;
height : auto ;
margin: 0 auto;
}
.item {
display : block;
width : inherit ;
height : 40px;
line-height : 40px;
background : #555 ;
border: 1px solid #000 ;
cursor: pointer;
color: #fff;
}
.item-data {
display : none ;
width : inherit ;
height : auto ;
border: 1px solid #ccc;
}
.active {
background : #eee ;
color : #000 ;
}
.item-data div{
margin: 30px;
}
```
-----------------------------------------------------------------------------