Post Reply 

Stylish Show/Hide Button in JQuery

Apr 19, 2011, 22:14
Post: #1
Stylish Show/Hide Button in JQuery
Download On GimpPimp

Hey Guys! Today I'll be showing you guys how to make a button/link you can press that'll open, and close in a nice animation, and will show/hide whatever it is you decide to put into it.
It's a very easy, and simple effect to create.
So lets get started!

The Setup:
So first off make a new folder on your desktop. I don't care what it says, just make sure it's relevant to what were creating. I named mine "JQuery-show-hide-button".
Now go into that folder, and make a new folder that says "js" (js = JavaScript)

Now make sure you download JQuery from here, and make sure the jquery.js file you just downloaded is in the "js" folder we created earlier.

Now open up Notepad (or whatever text editor you'd like to use) and put down the following code.

Code:
<html>
<head>
<title>Show/Hide Button</title>
</head>
<body>

</body>
</html>

TIP: This is the standard code you use when beginning to start coding a website. Feel free to change the title of the site to whatever you'd like.

Below the title tags put down the following code (make sure it's still in your head tags)
Code:
<script type="text/javascript" src="js/jquery.js"></script>

This code tells us were adding the Jquery Javascript file into the head of our website, so that when the site loads this will load with it.

The Show/Hide Button:
We now need to add the following code below the JQuery file we added in.
Code:
<script type="text/javascript">
$(document).ready(function() {
    $(".showcode").click (function() {
        $(this).next().toggle(300);
    return false;
    });
});
</script>

All this code tells us is that when we click the .showcode class (Inwhich we haven't made yet) that the next thing it'll do is toggle whatevers inside it, and the 300 is equal to 300ms.

Now inside your body tags you wanna add the following code.
Code:
<a href="#" class="showcode">Show/Hide Code:</a>
<p style="display:none;">
Whatever You Wanna Put In Here
</p>

The top line is a link that we'll click to open/close whatever's after it, that's in that div/table/etc: Will start to toggle. I made a paragraph, and added css to that to make it not display. So that when we click the link it'll toggle being shown, and hidden.

Now if you wanna change the link to a button, just replace this code.
Code:
<a href="#" class="showcode">Show/Hide Code:</a>

With this code.
Code:
<button type="button" class="showcode">Show/Hide:</button>

Now you're done all you need to do is save it as a "index.html" file in your "JQuery-show-hide-button" folder, and open it in your web browser to test out the effect.

The Code:
This is what your final code should look like.

Code:
<html>
<head>
<title>Show/Hide Button</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".showcode").click (function() {
            $(this).next().toggle(300);
        return false;
        });
    });
</script>
</head>

<body>
    <button type="button" class="showcode">Show/Hide:</button>
    <p style="display:none;">
        Whatever You Wanna Put In Here
    </p>
</body>
</html>

That's it for this tutorial, feel free to download the project file on GimpPimp.

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Creating a Simple and Clean "Pressed-In" Button in GIMP 2.8 Wyrlor 0 414 May 22, 2014 13:28
Last Post: Wyrlor
  My Wicked Button [Example] Wendy Black 2 714 Sep 6, 2013 03:42
Last Post: Wendy Black
  JQuery Hotkeys Tutorial mikethedj4 0 5,072 Jul 3, 2011 06:53
Last Post: mikethedj4
  JQuery Lightbox Effect mikethedj4 0 984 May 9, 2011 15:35
Last Post: mikethedj4
  JQuery Fade In/Out mikethedj4 0 2,303 May 9, 2011 15:33
Last Post: mikethedj4

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS