• Choose a category
• All
• Classic-Fiction

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Hide and show

Show

Hide

Toggle

Slide Down

Slide Up

Fade In

Fade Out

This is the content. It is hidden at first, but it is hidden and shown with jQuery techniques.

This example may look long and complicated when you view it all at once, but it really isn’t hard to understand when you break it into pieces.

Writing the HTML and CSS foundation

The HTML used in this example is minimal, as is common in jQuery development:

♦ A single level-one heading

♦ A series of level-two headings

♦ A paragraph

Well rounded

I used some sneaky CSS tricks to make the h2 elements look like buttons. First, I made them gray (like most buttons are). I also gave them an outset border to make them appear in 3D. Finally, I added the experimental border-radius element to get rounded corners. Unfortunately, border-radius is not an official CSS element yet. I added the experimental versions supported by Firefox, Safari, and Chrome, but the corners will not be rounded in any form of IE.

The level-two headings will be used as buttons in this example. I use a CSS style to make the h2 tags look more like buttons (adding a border and background color). I added an ID attribute to every button so that I can add jQuery events later.

If I wanted the h2 elements to look and act like buttons, why didn’t I just make them with button tags in the first place? In this example, I wanted to focus on the jQuery and keep the HTML as simple as possible. jQuery helps make any element act like a button easily, so that’s what I did. Users don’t expect h2 elements to be clickable, so you need to do some styling (as I did) to help them understand that the element can be clicked. For comparison purposes, the other two examples in this chapter use actual HTML buttons.

The other interesting part of the HTML is the content div. In this example, the actual content isn