-
Book Overview & Buying
-
Table Of Contents
jQuery for Designers: Beginner's Guide
By :
We're going to keep working with the files we set up in the previous section. Open up the scripts.js file that's inside your scripts folder. After the document ready statement, write a new empty function called dynamicFaq:
function dynamicFaq() {
//our FAQ code will go here
}Let's think through how we would like this page to behave. We would like to have all the answers to our questions hidden when the page is loaded, then when a user finds the question they're looking for, we would like to show the associated answer when they click the question.
That means the first thing we'll need to do is hide all the answers when the page loads. That's as simple as selecting all of our <dd> elements and hiding them. Inside your dynamicFaq function, add a line of code to hide the <dd> elements:
function dynamicFaq() {
$('dd').hide();
}
You might be wondering why we didn't use CSS to set the display of the <dd> tags to none....
Change the font size
Change margin width
Change background colour