Trendy jQuery Accordion Plugin (FREE): Akordeon
Akordeon is a stylish jQuery plugin for including environment-friendly accordion fashion menu to an online web page. The concept behind Akordeon is to offer a light-weight and customizable interface for collapsible panels that may maintain any knowledge in a restricted house.
Akordeon is a jQuery Accordion Plugin that is customizable and can be utilized to show massive chunks of information (textual content, pictures and so on.) in a restricted home. As an example, you should use it to show categorized knowledge or menu choices identical to a restaurant’s menu gadgets with every class knowledge displayed in a separate panel.
Akordeon is predicated on Akordeon design freebie and is free.
Customizing Akordeon
- expadedItem: Merchandise to be expanded by default, first merchandise is developed by default
- expadSpeed: Akordeon merchandise growth animation velocity, default worth 200
- toggle: If true every merchandise may be broadened and collapsed, default worth false
- buttons: Whether or not to show broader/collapse button on every commodity, default worth true
- expandText: Button textual content when merchandise is expanded, default textual content ‘–’
- collapseText: Button textual content when merchandise is collapsed, default textual content ‘+.’
- hiddenItem: zero primarily based index of commodity that must be hidden, -1 means seen all
- itemsOrder: Array of indexes if you would like the plugin to reorder gadgets
Utilizing Akordeon
In your HTML file add the subsequent references within the head part.
- Add a reference to newest jQuery script
- Count a reference to jquery.akordeon.js file
- Add a reference to jquery.akordeon.css file
Place the Markup/HTML code on your accordion. e.g.
<div class="akordeon"> <div class="akordeon-item"> <div class="akordeon-item-head"> <div class="akordeon-item-head-container"> <div class="akordeon-heading"> Header Right here </div> </div> </div> <div class="akordeon-item-body"> <div class="akordeon-item-content"> Contents right here </div> </div> </div> <div class="akordeon-item-head"> <div class="akordeon-item-head-container"> <div class="akordeon-heading"> Header Right here </div> </div> </div> <div class="akordeon-item-body"> <div class="akordeon-item-content"> Contents right here </div> </div> </div>
Now name the Akordeon initializer to perform, and your accordion is prepared.
$(doc).prepared(perform () );
Right here is the whole code for instance above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Akordeon-A Stylo Trendy jQuery Accordion Plugin</title> <script src="js/jquery.min.js" kind="textual content/javascript"></script> <hyperlink href="css/jquery.akordeon.css" rel="stylesheet" kind="textual content/css" /> <hyperlink href="css/demo.css" rel="stylesheet" kind="textual content/css" /> <script src="js/jquery.akordeon.js" kind="textual content/javascript"></script> <script kind="textual content/javascript"> $(doc).prepared(perform () ); </script> </head> <physique> <div class="akordeon"> <div class="akordeon-item"> <div class="akordeon-item-head"> <div class="akordeon-item-head-container"> <div class="akordeon-heading"> Header Right here </div> </div> </div> <div class="akordeon-item-body"> <div class="akordeon-item-content"> Contents Right here </div> </div> </div> <div class="akordeon-item"> <div class="akordeon-item-head"> <div class="akordeon-item-head-container"> <div class="akordeon-heading"> Header Right here </div> </div> </div> <div class="akordeon-item-body"> <div class="akordeon-item-content"> Contents Right here </div> </div> </div> <div class="akordeon-item"> <div class="akordeon-item-head"> <div class="akordeon-item-head-container"> <div class="akordeon-heading"> Header Right here </div> </div> </div> <div class="akordeon-item-body"> <div class="akordeon-item-content"> Contents Right here </div> </div> </div> </div> </physique> </html>
Akordeon Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
Awesome effect !! Very nice ! thanks so much.
Nice design & nice effect. Thanks for sharing..
wow brilliant nice work i really appreciate this. keep it up.
Hurrah, that’s what I was looking for, what a data! existing here at this web site, thanks admin of this web page.