https://github.com/effone/jquery.ruk

Yet another full-fledged jQuery accordion plugin with bare minimum code.
https://github.com/effone/jquery.ruk

accordion jquery minimal plugin tiny

Last synced: about 1 month ago
JSON representation

Yet another full-fledged jQuery accordion plugin with bare minimum code.

• Host: GitHub
• URL: https://github.com/effone/jquery.ruk
• Owner: effone
• License: mit
• Created: 2018-08-21T08:43:58.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-22T07:25:55.000Z (about 6 years ago)
• Last Synced: 2024-03-09T17:29:06.446Z (8 months ago)
• Topics: accordion, jquery, minimal, plugin, tiny
• Language: HTML
• Size: 7.81 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jquery.ruk

Yet another full-fledged jQuery accordion plugin with bare minimum code. 607 bytes only (418 bytes : js, 189 bytes : css

## Dependency

Since it is a jQuery plugin; jQuery library should be included on prior.

## Instalation

Include `jquery.ruk.min.css` from dist folder.

```

```

Include `jquery.ruk.min.js` from dist folder.

```

```

Initiate the plugin.

```

$('.target').ruk();

```

Thats all. Your target div is now ruk (an accordion).

npm? `npm install jquery.ruk`

## Target Element Structure

The target element should have div groups, each containing collapse groups in div pairs : one for title and the other for content (that will hide or show). Targetting element structure other than this may cause the plugin malfunction. Example:

```

 


    
 

        
Title Block
 

        
Content Block
 

    


    
 

        
Title Block

        
Content Block

    


    
 

        
Title Block

        
Content Block

    


     



```


## Option(s)

As of now there is only one option and that is `only`. By default this is set to `false` but if you set it `true` only one element will remain opened at-a-time, that means clicking on a 'title block' will close other opened 'content blocks' before opening its content.

You can set `only` option on this way:

```

$('.target').ruk({

    only: true

});

```

## Callback

This plugin supports a callback and extends the ability to get the group sequence number and it's content state after each title click. This can be helpful for 

- Saving the states of the groups using cookies

- Targetting to load ajax content in the content block when it gets opened.

etc.

You can set the callback this way:

```

$('.target').ruk({

    after: function (id, state) {

        // 'id' is the group serial number

        // 'state' is corresponding 'content block' state. If the content block is visible the state is 'true', else 'false'.

        console.log(id + " : " + state);

    }

});

```

## Version History

1.0.0 : <2018.08.22>

- Initial stable release