1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Welcome to Lake Valor!
    Catch, train, and evolve Pokémon while you explore our community. Make friends, and grow your collection.

    Login or Sign Up
Cookies Welcome

Code Tutorial - Custom jQuery Accordion Setup

Discussion in 'The Lounge' started by Sanctuary, May 15, 2016.

Thread Status:
Not open for further replies.
  1. Sanctuary

    Sanctuary
    Level 50
    Say it!

    Odd Egg (S)
    (Odd Egg (S))
    Level 2
    Joined:
    Sep 6, 2014
    Posts:
    2,032
    PokéPoints:
    ₽94.1
    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 id="accordion">
    <div class="accord_wrap">
    <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_wrap">
    <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_wrap">
    <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:
    [​IMG]

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

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

    With that applied, here's what it looks like now:
    [​IMG]

    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
    /*
    displayByDefault - Do you want the first item to display by default?
    onlyOneOpen - Do you want only one item open at a time? If set to true, the next option won't matter
    canHideIfOpen - If an item is open, do you want to allow it to be closed again?
    icons - The 2 Font Awesome icons you want to use
    NOTE - when changing the first 3 settings, only use true or false
    */
    var config = {
    displayByDefault: true,
    onlyOneOpen: false,
    canHideIfOpen: true,
    icons: "fa-angle-down fa-angle-up"
    },
    // This will target the very first item in the group
    firstChild = "#accordion .accord_wrap:first-child";

    // If the configuration setting "displayByDefault" is equal to true...
    if (config['displayByDefault'] == true) {

    // Give it the attribute "active-item" so that we can target the active accordion item later
    $(firstChild).attr("active-item", "true");

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

    // And then change the icon to the appropriate icon
    $(firstChild + " > h1 i").toggleClass(config['icons']);

    }

    // Once we click a title...
    $(".accord_wrap > 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
    */
    var active = {
    wrap: $(".accord_wrap[active-item='true']"),
    div: $(".accord_wrap[active-item='true'] > div"),
    icon: $(".accord_wrap[active-item='true'] > h1 i")
    };

    // If the configuration setting "onlyOneOpen" is NOT true...
    if (config['onlyOneOpen'] !== true) {

    // Target the active item and remove the "active-item" attribute since we won't be needing it
    active['wrap'].removeAttr("active-item");

    // 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 this item does NOT have the "active-item" attribute...
    if ($(this).parent().attr("active-item") !== "true") {

    // Close it, change the icon, and then remove the "active-item" attribute
    // (so that we know it's no longer the current active tab)
    active['div'].stop().slideToggle();
    active['icon'].toggleClass(config['icons']);
    active['wrap'].removeAttr("active-item");

    // Target this item and give it the "active-item" attribute
    $(this).parent().attr("active-item", "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']);

    }
    // If this item DOES have the "active-item" attribute...
    else {

    // If the configuration setting "canHideIfOpen" is equal to true...
    if (config['canHideIfOpen'] == true) {

    // Target the active item and close it
    active['div'].stop().slideToggle();

    // Also change the icon accordingly
    active['icon'].toggleClass(config['icons']);

    // And then remove the "active-item" attribute
    active['wrap'].removeAttr("active-item");

    }
    // If it's not equal to true...
    else {
    // Then don't do anything
    return false;
    }

    }
    }
    });

    });


    After adding that, you're done!
    This is the final result:
    [​IMG]

    If you have the "onlyOneOpen" setting set to false, then you can open multiple items at once!
    [​IMG]

    Use this wherever you wish, but please note that it can only be used once per page.
    Not counting all the comments included, you now have a jQuery accordion with only 51 lines of jQuery! :D
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
    #1 May 15, 2016
    Noctis likes this.
Thread Status:
Not open for further replies.

Share This Page