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.