1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Stylish Show/Hide Button in JQuery

Discussion in 'Gimp Tips & Tutorials' started by mikethedj4, Apr 19, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    Click Here: To see this effect in action!

    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, and don't forget to become a fan of GimpPimp on Facebook.
     

    Attached Files:

  2. virtualTune

    virtualTune Active Member

    Joined:
    Sep 2, 2009
    Messages:
    4,421
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Neverland
    Home Page:
    i understand only Bahnhof
     
  3. Arzoroc

    Arzoroc Moderator Staff Member

    Joined:
    Oct 12, 2009
    Messages:
    2,201
    Likes Received:
    1
    Trophy Points:
    38
    Location:
    Germany
    Me2 :/
     
  4. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    ok well I guess I'll haft to make a video tutorial on this as well.
     

Share This Page