Sign in to follow this  
Followers 0
Sanctuary

Custom jQuery Accordion Tutorial

3 posts in this topic

Here's a tutorial on how to create a jQuery accordion toggler for your website. For those who don't know what a jQuery accordion does, it allows you show/hide items upon clicking their header/title toggler. If you want an example of what it looks like, go to the bottom of this post.
This tutorial assumes that you already have an HTML file ready to edit and have basic HTML knowledge, so I won't bother with those things.
Note: You will need jQuery for this code to work. If you don't already have jQuery installed, add inside your <head> tag.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>


Note: This tutorial also utilizes the Font Awesome icon font. If you don't already have it installed,  you can read how to install it by visiting this page OR by inserting this inside your <head> tag:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />

First, let's get started with the HTML markup. What you'll need is something like this:

<div class="accord_wrap">
	<div class="accord_item">
		<h1>Title <i class="fa fa-fw fa-angle-down"></i></h1>
		<div>Here's some content that can be toggled.</div>
	</div>
	<div class="accord_item">
		<h1>Title <i class="fa fa-fw fa-angle-down"></i></h1>
		<div>Here's some content that can be toggled.</div>
	</div>
	<div class="accord_item">
		<h1>Title <i class="fa fa-fw fa-angle-down"></i></h1>
		<div>Here's some content that can be toggled.</div>
	</div>
</div>

I'll be using 3 items for this example, but you can use however many you see fit.
Since we haven't applied any CSS to this, this is what it currently looks like:

3741463268268ea32.png

The CSS we're gonna apply is very minimal - only 3 lines!
Here it is:

.accord_wrap .accord_item { margin-bottom: 10px; }
.accord_wrap .accord_item > h1 { display: inline-block; font-size: 18px; cursor: pointer; }
.accord_wrap .accord_item > div { display: none; }

With that applied, here's what it looks like now:

37414632685588a3d.png

Looking good! But of course, it doesn't actually work without the jQuery.
To save both your and my time, I'll be leaving comments in the code instead of explaining things step-by-step in this post.
If you already understand jQuery then you probably won't need the comments, but I'll be leaving them in there for those who aren't very experienced with it.

This is the jQuery code we'll be using:

$(document).ready(function() {

	// Configuration settings
	/*
		display_default - Do you want the first item to display by default?
		only_one - Do you want only one item open at a time? If set to true, the next option won't matter
		hide_opened - If an item is open, do you want to allow it to be closed again?
		icons - The 2 Font Awesome icon classes you want to use
		Note: when changing the first 3 settings, only use true or false
	*/
	var config = {
		display_default: true,
		only_one: false,
		hide_opened: true,
		icons: "fa-angle-down fa-angle-up"
	}
	// If the config setting "display_default" is set to true...
	if (config['display_default']) {
		// Get the first item in the accordion wrapper
		var first_item = ".accord_wrap .accord_item:first-child";

		// Give it the attribute "data-active"
		$(first_item).attr("data-active", "true");

		// Open it
		$(first_item + " > div").show();

		// And then give it the appropriate icon
		$(first_item + " > h1 i").toggleClass(config['icons']);
	}

	// Once we click a title...
	$(".accord_item > h1").click(function() {
		// Here's an array of options to make it easier to target the active accordion item
		// wrap - Target the active accordion's wrap
		// div - Target the active accordion's div (where you place your content)
		// icon - Target the active accordion's icon
		// We use $(this).closest() so that we can use multiple accordions throught the site!
		var active = {
			wrap: $(this).closest(".accord_wrap").find(".accord_item[data-active='true']"),
			div: $(this).closest(".accord_wrap").find(".accord_item[data-active='true'] > div"),
			icon: $(this).closest(".accord_wrap").find(".accord_item[data-active='true'] > h1 i")
		};

		// If the config settings "only_one" is NOT set to true...
		if (!config['only_one']) {
			// Get the active div content and remove the "data-active" attribute
			active['wrap'].removeAttr("data-active");

			// Toggle the icon
			$(this).find("i").toggleClass(config['icons']);

			// And then slideToggle the content, while also NOT continuing with the rest of the code
			return $(this).next().stop().slideToggle();
		}

		if (!$(this).parent().attr("data-active")) {
			// Close it, change the icon, and then remove the "active-item" attribute
			active['div'].stop().slideToggle();
			active['icon'].toggleClass(config['icons']);
			active['wrap'].removeAttr("data-active");

			// Target this item and give it the "data-active" attribute
			$(this).parent().attr("data-active", "true");

			// Target the div (where you place your content) and open it
			$(this).next().stop().slideToggle();

			// Target the icon and then change it accordingly
			$(this).find("i").toggleClass(config['icons']);
		}
		else {
			// If the config setting "hide_opened" is NOT set to true, don't continue with the code
			if (!config['hide_opened']) { return; }

			// Close the active icon, change the icon, and remove the "data-active" attribute
			active['div'].stop().slideToggle();
			active['icon'].toggleClass(config['icons']);
			active['wrap'].removeAttr("data-active");
		}
	});

});

After adding that, you're done!
This is the final result:

3741463269679ea81.png

If you have the "only_one" setting set to false, then you can open multiple items at once!

3741463271260c9b0.png

Not counting all the comments and blank lines, you now have a jQuery accordion with only 40 lines of jQuery! :D
Code and tutorial by Sanctuary.

Edited by Sanctuary
Updated with better code.
0

Share this post


Link to post
Share on other sites

Updated - I've updated the OP with better code! Now using less lines of jQuery, and you can now also use multiple accordions throughout your site instead of 1! Here's a screenshot:

374147603716895bd.png

 

0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.