[Tut] Stylish Show/Hide Button in JQuery
3 posts
Page 1 of 1
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
This is a very easy, and simple tutorial. 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.
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.
Below the title tags put down the following code (make sure it's still in your head tags)
The Show/Hide Button:
We now need to add the following code below the JQuery file we added in.
Now inside your body tags you wanna add the following code.
Now if you wanna change the link to a button, just replace this code.
The Code:
This is what your final code should look like.
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: Select all
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.<html>
<head>
<title>Show/Hide Button</title>
</head>
<body>
</body>
</html>Below the title tags put down the following code (make sure it's still in your head tags)
Code: Select all
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.<script type="text/javascript" src="js/jquery.js"></script>The Show/Hide Button:
We now need to add the following code below the JQuery file we added in.
Code: Select all
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.<script type="text/javascript">
$(document).ready(function() {
$(".showcode").click (function() {
$(this).next().toggle(300);
return false;
});
});
</script>Now inside your body tags you wanna add the following code.
Code: Select all
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.<a href="#" class="showcode">Show/Hide Code:</a>
<p style="display:none;">
Whatever You Wanna Put In Here
</p>Now if you wanna change the link to a button, just replace this code.
Code: Select all
With this code.
<a href="#" class="showcode">Show/Hide Code:</a>Code: Select all
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.<button type="button" class="showcode">Show/Hide:</button>The Code:
This is what your final code should look like.
Code: Select all
That's it for this tutorial, and hopefully it came in handy for you cooll;<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>
Last edited by mikethedj4 on Fri Jul 08, 2011 7:10 am, edited 3 times in total.
Quick Profile
Information
Posts: 1928
Joined: Sun Jun 27, 2010 9:15 pm View Full Profile
Thanks I might use it ;)
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
No problem 
3 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023