Fortune Teller
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.
Development info
- Stylesheet location:
/source-v6/styles/components/_fortune-teller.scss - *Not possible in WordPress at this point in time
form class="fortune-teller"- The answers must begin with Yes: or No: for accessibility
- Pay attention to all the
class="yes"andclass="no" - Pay attention to the
name="x",value="x", andid="x"on the inputs div class="qa-group"wraps an entire question and its answers- The yes/no answers are wrapped in
div class="answer"<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>
Styling
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.
Responsive behavior
No change.
There is an example on this Panther Tracks page.
