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 Tabs

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 some jQuery tabs for your website.
    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>
    Let's begin with the HTML.

    <div id="tabs_wrap">
    <ul>
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    </ul>
    <div class="tabs_content">
    <div>
    Tab content #1.
    </div>
    <div>
    Tab content #2.
    </div>
    <div>
    Tab content #3.
    </div>
    </div>
    </div>


    I'll be using 3 tabs for this tutorial.
    Right now, this is what it looks like:
    [​IMG]

    Let's go ahead and style that with some CSS.
    You'll want something along these lines:

    #tabs_wrap > ul { margin-bottom: 5px; }
    #tab_wrap > ul > li {
    display: inline-block;
    text-align: center;
    background-color: #2C93FA;
    border-radius: 3px;
    }

    #tab_wrap > ul > li.active a { background-color: rgba(0, 0, 0, 0.25); }
    #tab_wrap > ul > li a {
    color: #fff;
    display: block;
    padding: 5px 8px;
    }

    #tab_wrap .tabs_content > div:not(:first-child) { display: none; }

    Here's what it looks like with the CSS applied:
    [​IMG]

    A pretty simple layout. If you have some CSS knowledge, you can of course tweak it to your liking.
    While it looks pretty and whatnot right now, it's not complete - it still doesn't actually work!
    To make it fully functional, we'll need to apply our jQuery.

    For the sake of time, I'll be leaving comments inside the code itself instead of explaining it step-by-step.
    Here's the jQuery we're gonna be using:

    $(document).ready(function() {

    // Set some variables so that we can use them later
    var tabNum = 0, tabActive = 0;

    // Look for every <li> inside the first <ul> tag inside the #tabs_wrap container and target them
    $("#tabs_wrap > ul > li").each(function() {

    // Give each of them the attribute "tab_num" with the value that's equal to the "tabNum" variable
    // For the first one, it'll be 0
    $(this).attr("tab_num", tabNum);

    // After you give an <li> tag the "tab_num" attribute
    // Increment the tabNum's variable amount by 1
    // So if the first tab was #0, the next will be #1, and then #2, etc.
    tabNum++;

    });

    // Target the first tab itself and give it the "active" class
    $("#tabs_wrap > ul > li:first-child").addClass("active");

    // When we click on a tab...
    $("#tabs_wrap > ul > li a").click(function(e) {

    // Since the <a> tag has a # as the href
    // We want to prevent it from taking us to the top of the screen
    e.preventDefault();

    // Grab this tab's number
    var thisTab = $(this).parent().attr("tab_num");

    // If this tab is NOT the current active tab...
    if (thisTab !== tabActive) {

    // Find the active tab and remove the "active" class from it
    $("#tabs_wrap .active").removeClass();

    // Give this tab the "active" class instead
    $(this).parent().addClass("active");

    // Close the tab that was already open
    $(".tabs_content > div:visible").slideUp();

    // And then open this one instead
    $(".tabs_content > div").eq(thisTab).slideDown();

    }
    // If it IS the current active tab...
    else {
    // Do nothing
    return false;
    }

    // Set the current active tab's number to this tab's number
    tabActive = thisTab;
    });

    });

    And then you're done!
    Here's what the final product will look like:
    [​IMG]

    It looks about the same as the screenshot after applying the CSS, but it is now fully functional and can be clicked around with no problem. :)
    Enjoy!
     
    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