Stylish Show/Hide Button in JQuery

Click Here: To see a demo.

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:

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:

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:

With this code.

Code:

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 below.

		Topic: Stylish Show/Hide Button in JQuery (Read 201 times)
0 Members and 2 Guests are viewing this topic.