Let's say that you have a boring FAQ page on your website, and you'd like to add a bit of interactivity to it, as well as shorten the page so that users can quickly find the questions they're looking for. One of the ways we can achieve these two goals is by hiding the answers to the questions, and then showing them when the user clicks on the question.
To help us achieve our goals, we will use Fx.Tween
to let users click on a frequently-asked question, which would reveal their corresponding answers.
We will start with the
HTML.definition
list<dl>
element so that we can pair up the questions with their respective answers (dd
). Here is the HTML code we're going to use (place your questions inside the<
element, and their corresponding answers in the followingdt
><
element).dd
><body> <h1>My Product FAQ Page</h1> <dl> <
dt
>...Question 1...<dt
> <dd
>...Answer 1...<dd
> <dt
>...Question...