Fortune Teller is a way to ask yes/no questions and display a different answer based on the selection. They aren’t common on the website, but are handy in certain cases.
Fortune Teller is similar to expandable sections, but provides two answers instead of one.
- Stylesheet location:
- *Not possible in WordPress at this point in time
- The answers must begin with Yes: or No: for accessibility
- Pay attention to all the
- Pay attention to the
id="x"on the inputs
div class="qa-group"wraps an entire question and its answers
- The yes/no answers are wrapped in
<form class="fortune-teller"> <fieldset> <fieldset class="qa-group"> <legend>Question 1</legend> <div class="answer-group"> <label class="yes" for="question-1-yes">Yes <input name="question-1" value="yes" type="radio" id="question-1-yes" /> </label> <label class="no" for="question-1-no">No <input name="question-1" value="no" type="radio" id="question-1-no" /> </label> <div class="answer"> <p class="yes">Yes: Yes description</p> <p class="no">No: No description</p> </div> </div> </fieldset> <fieldset class="qa-group"> repeat </fieldset> </fieldset> </form>
Fortune Teller components look like forms (they are forms without a submit button). Each question group is divided by a horizontal line. When you click either the Yes or No option for each question, the answer appears in a white box below, with an arrow pointed at the selected radio button.
There is an example on this Panther Tracks page.