The Frequently Asked Questions page has been a mainstay of all types of websites since the dawn of the Web. It's used as a marketing page, as an attempt to reduce the number of calls or e-mails to a customer service department, and as a helpful tool for site visitors to learn more about the company or organization they're dealing with or the products or services they're interested in purchasing. Though Natalie Maclees will be building a FAQ page for this example, this expand and collapse technique will be useful in many different situations.
In this chapter, you will learn:
- How to traverse an HTML document with jQuery
- How to show and hide elements
- How to use simple jQuery animations
- How to easily toggle a class name for an element
Natalie Maclees will get started with her sample HTML file and associated files and folders. In this case, her HTML is going to be a definition list with the questions inside the <dt> tags and the answers wrapped in <dd> tags. By default, most browsers will indent the <dd> tags which means the questions hang into the left margin, making them easy to scan. Inside the <body> of your HTML document, add a heading and a definition list. For users with JavaScript disabled, this page works fine as is. The questions hang into the left margin and are bolder and darker than the rest of the text on the page, making them easy to scan.
Comments
Be the first to write a comment
You must me logged in to write a comment.