Another feature that is often added to Web 2.0 sites is tabbed content. I'm not talking about tabbed navigation. Tabbed content is when different chunks of HTML are shown depending on what tab is clicked.
I am using this on two sites:
Goal: Create a tabbed content window using CSS and jQuery
Step 1. Get jQuery
In this example, we are going to use the jQuery core library found here.
Step 2. Create your HTML page
I'm going to create a file called myapp.html. I'll put it in the same location that I placed my jQuery library at.
Step 3. Create your CSS file
Let's create the CSS file that's included in the HTML above. We'll call it 'myapp.css'
Lines 1-6 remove the dotted outline that Firefox puts around the clicked tabs.
Lines 7-11 set the width and style properties of the whole container.
Lines 12-17 sets the styles for the tab container. Notice that on line 15, we set a height of 21 pixels. This coincides with the font size set on line 10. If you were to increase or decrease the font size, you will also want to do the same for the height.
Lines 18-20 make it so that all the items in the unordered list (ul tag) appear next to each other instead of on top of each other.
Lines 21-30 sets the tab styles. You can use backgrounds instead of just colors here if desired.
Lines 31-34 sets the style for the active tab. Notice that the top padding is 4 pixels instead of 3. By doing this, we are able to make the bottom of the tab appear white making it look like it's part of the contents below.
Lines 35-39 sets up the style for the contents container. Notice that there is a border set for the right, bottom, and left. This is because our top border is already set on line 14.
Lines 40-42 set the non-active tab contents to be invisible.
Lines 43-45 set the active tab to be visible.
Lines 46-48 are used to clear out any floats that appear above it. (see lines 24-26 in the HTML above)
Hopefully my notes in the .js file itself explains how it works well enough.
That should do it. Once you're done, your app should look something like this:
You can download my sample code here.
But Wait, There's More!
Sometimes it doesn't make sense to write this stuff from scratch when there are so many other resources out there to use.
I hope you like this post. If you have any suggestions on future how-to topics you would like me to cover, please email me at email@example.com.