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 - Simple jQuery Spoiler

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 simple jQuery spoiler. 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>

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

    <div id="spoiler_wrap">
    <input type="button" value="Show" />
    <div class="spoiler_content">Here's some hidden content</div>
    </div>

    At first, it'll look something like this:
    [​IMG]

    As you can see, the content isn't hidden like it's supposed to be, but that's because we haven't applied the CSS yet. Let's do that right now.
    In your .css file, add this:

    #spoiler_wrap input[type='button'] {
    color: #fff;
    background-color: #2C93FA;
    padding: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    }

    #spoiler_wrap .spoiler_content {
    display: none;
    margin-top: 5px;
    padding-left: 5px;
    border-left: 3px solid #2C93FA;
    }

    It should now look like this:
    [​IMG]

    Looks pretty good, right?
    The next (and final) part of this tutorial would be the jQuery itself. Some of you may not know jQuery, so I'll leave some comments in the code to make things easier to understand.

    $(document).ready(function() {

    // Once we click the spoiler toggle button...
    $("#spoiler_wrap input[type='button']").click(function() {

    // If the button's current value (button's text) is "Show", then...
    if ($(this).val() == "Show") {
    // Change the value (button's text) to "Hide"
    $(this).val("Hide");
    }
    // If it's NOT equal to "Show", then...
    else {
    // Change the value (button's text) to "Show"
    $(this).val("Show");
    }

    // After the button has been clicked, search for this specific element
    // and then target the element directly after it
    // afterwards, slideToggle it
    $(this).next().stop().slideToggle();
    });

    });

    And you're done! Super easy, nice looking jQuery spoiler with just 3 pieces of code.
    Here's what it looks like after being opened:
    [​IMG]

    You can see that the button's text has been changed to "Hide" and that the content is now shown.
    You can even copy/paste the HTML as many times as you want and create multiple spoilers! Like so:
    [​IMG]

    Hope you find this useful!
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
    #1 May 15, 2016
    Charlotte likes this.
Thread Status:
Not open for further replies.

Share This Page