Stylish JQuery Accordion Plugin - Akordeon

I am going share a simple jQuery Plugin which provide a lightweight and customizable interface for collapsible panels that can hold any kind of data in a limited space. This plugin is fully customizable and can be used to display large chunks of data (text, images etc.) in a limited space.

4.5/5.0
Last updated 09 September, 2022
By Admin

For instance, you can use it to display categorized data or menu options just like a restaurant’s menu items with each category data displayed in a separate panel.

Libraries

Add jquery core library and then add following plugins library on page.

 <script src="js/jquery.min.js" type="text/javascript"></script>
 <link href="css/jquery.akordeon.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.akordeon.js" type="text/javascript"></script>

HTML

Add the Markup/HTML code for your accordion.

<div class="akordeon">
	<div class="akordeon-item">
		<div class="akordeon-item-head">
			<div class="akordeon-item-head-container">
				<div class="akordeon-heading">
					Header Here
				</div>
			</div>
		</div>
		<div class="akordeon-item-body">
			<div class="akordeon-item-content">
			  Contents here
			</div>
		</div>
	</div>
</div>

Now call the akordeon initializer function and your accordion is ready.

$(document).ready(function () {
	$('.akordeon').akordeon();
});

You can also customize accordian by using following options in your function.

$(document).ready(function () {
	$('.akordeon').akordeon({
		// set the expanded item
		expandedItem: 0, 
		// animation speed
		expandSpeed: 200,
		// is toggled
		toggle: false, 
		// expand text
		expandText: '&ndash;', 
		// collapse text
		collapseText: '+', 
		// shows/hides buttons
		buttons: true, 
		// hidden item
		hiddenItem: -1,
		// sets the item order
		itemsOrder: []
	});
});

I hope it can help you...

Jquery Plugin

Accordion

Stylish JQuery Accordion Plugin - Akordeon

Categories