jQuery Code Example: How to do a Hide/Show Toggle Button

This is a function that slowly hides content when you click a button, changes the value of the button from "Hide" to "Show", then slowly shows content when the button is clicked again. You'll need to create 3 files: an HTML file, a .css, and a .js Note the names of the .css files and .js files at the bottom of the HTML. Have fun playing around with the properties to give it some color or move things around.

Let's start with the HTML:
<html>
  <head>
    <title>
     Toggle Button Example
    </title>
    <link href="togglebutton.css" type="text/css" rel="stylesheet">
  </head>
  <body id="public">
    <div>

      <!-- Body Header -->
      <div id="header">
        <h1>
          This is the Header. It can also be a logo.
        </h1>
        <p>Here is some text in the header! Click the "Hide" button to hide this, along with the header and the footer.
        </p>
      </div>
     
      <!-- Body Content -->
      <div id="content">
        <input type="button" value="Hide" id="toggleButton" style="float:right;">
        <h2>
          Content Header
        </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
      </div>
      <!-- Footer -->
      <div id="footer">
       This is the footer! This toggles too!
      </div>
     </div>
   
    <script src="libs/jquery-1.4.4.js"></script>
    <script src="hideshow.js"></script>
  </body>
</html>


Next, some CSS formatting with a stylesheet:

body {
  background-color: #CCCCCC;
  color: #333333;
  font-family: sans-serif;
  font-size: 1em;
  line-height: 1.65;
  
}


#content {
 background-color: #FFFFFF;
 border-color: transparent;
 -moz-box-shadow: 5px 7px 7px rgba(194, 194, 194, 0.3);
 -moz-border-radius: 5px 5px 5px 5px;
 -webkit-border-radius: 5px 5px 5px 5px;
 border-width: 1px;
 float: left;
 min-height: 250px;
 padding: 2%;
 width: 50%;
}

#content h2 {
  color: #666666;
  font-weight: normal;
}

#footer {
 float: left;
  padding: 18px;
  width: 64%;
}

 Then, the jQuery:

$(function() {
$('#toggleButton').click( function() {
  $('#header').toggle('5000');
  $('#footer').toggle('5000', function(){
 if ($('#header').is(':visible')) {
  $('#toggleButton').val('Hide') 
 } else {
  $('#toggleButton').val('Show') 
   }
    });
  });
});

Load the .html file in your browser and see what you've got! 

jQuery Tutorial: Using Themeroller to Instantly Build a Tab Navigation

I am in love with jQuery and the people who have developed the library and so generously shared, like the folks at jquery.com who have developed ThemeRoller. Your life is about to get so much easier as a web developer because you don't have to reinvent the wheel!

Look at the slick tab navigation I created in literally 5 minutes (image is not actual size):

So just how easy is it?
1) Go to ThemeRoller.

2) Click on the "Gallery" tab on the top of the black navigation to the left. Notice all the widgets on the main page. Which would you like on your site?

3) Select a theme from the gallery. Notice how the colors of all the widgets change. For this exercise, I selected "Sunny".

4) If you're feeling particular or don't see the color palette you need, click the "edit" button at the bottom of the theme icon and use hexadecimal color codes to change your colors.
...OR simply click "Download" to download the theme as is. If you have done some editing, click the orange "Download Theme" button.

5) This will take you to a page that says "Build Your Download". Select the elements you will need for your project. I think keeping it simpler is better--you don't want a bunch of code you don't need. For example, I did not select "Position", since the tabs nav is the only element I am using.

6) You will receive a zipped file with everything you need, except your content of course.

7) Expand it and open the folder. Inside you will see folders that contain an index.html file, a .js file, and a .css file.

8) Edit the index.html file to remove all of the extraneous text--like the greeting and explanation, so that all that remains is the necessary html for the file and the formatted tabs navigation. you may want to leave the other two alone because they're pretty complex--unless you want to tinker with them to see what they do, or your skills are more advanced. You can always use a different .css file and .js file for the rest of the site.

You may also want to move the call to the .js file to the bottom so the page loads more quickly.

9) Replace the default content with your own, and add tabs and sections as you need them.

So there you go! Polished tab navigation, in just minutes!

If you feel that I have forgotten anything feel free to post any questions you may have below.