Accordion
What is an accordion table? How can I use one in a lesson?
Goal:
Goal:
An accordion table consists of labeled rows that function like tabs in a tab set. When the student clicks a labeled row, a hidden row drops down beneath the labeled row, revealing additional content. This extra drop-down row closes/disappears when the label is clicked a second time. More than one drop-down row can be open at a time.
The text that appears above an accordion table should direct students’ attention to the content accordion and also tell them what the table is meant to show them or what kind of practice it will provide and what information will be revealed when they click the labeled rows.
Math Sample
In this lesson, you’ve seen how to solve problems involving composite functions. Use the activity below to practice solving these kinds of problems on your own. Click each row to see a practice problem. Solve the problem, and then click the answer button to check your work.
Find \(\mathsf{(g \circ f)(1) }\) when \(\mathsf{ f(x) = 2x^2-3 }\) and \(\mathsf{g(x) =4x }\).
| Find the value of the inner function at x = 1. | \(\mathsf{ f(1) = 2(1)^2-3 = -1 }\) |
| Now, find the value of the outer function at the solution you found in the first step (x = -1). | \(\mathsf{g(-1) =4(-1) = -4 }\) |
Find \(\mathsf{(f \circ g)(-3) }\) when \(\mathsf{ f(x) = 4x+3 }\) and \(\mathsf{g(x) =2x^2-5 }\).
| Find the value of the inner function at x = -3. | \(\mathsf{g(-3) =2(-3)^2-5 = 13 }\) |
| Now, find the value of the outer function at the solution you found in the first step (x = 13). | \(\mathsf{ f(13) = 4(13)+3 = 55 }\) |
Find \(\mathsf{(g \circ f)(1) }\) when \(\mathsf{ f(x) = 4x+3 }\) and \(\mathsf{g(x) =2x^2-5 }\).
| Find the value of the inner function at x = 1. | \(\mathsf{ f(1) = 4(1)+3 = 7 }\) |
| Now, find the value of the outer function at the solution you found in the first step (x = 7). | \(\mathsf{g(7) =2(7)^2-5 = 93 }\) |
Sample Formatting
How was this content formatted so that we can develop the content correctly?
[insert accordion table]
[Row 1 label] Practice 1
[Row 1 drop-down content]
Find \(\small\mathsf{(g \circ f)(1) }\) when \(\small\mathsf{ f(x) = 2x^2-3 }\) and \(\small\mathsf{g(x) =4x }\).
[insert answer reveal button]
[insert highlight table]
[Row 1] Find the value of the inner function at x = 1.
\(\small\mathsf{ f(1) = 2(1)^2-3 = -1 }\)
[Row 2] Now, find the value of the outer function at the solution you found in the first step (x = -1).
\(\small\mathsf{g(-1) =4(-1) = -4 }\)
[Row 2 label] Practice 2
[Row 2 drop-down content]
Find \(\small\mathsf{(f \circ g)(-3) }\) when \(\small\mathsf{ f(x) = 4x+3 }\) and \(\small\mathsf{g(x) =2x^2-5 }\).
[insert answer reveal button]
[insert highlight table]
[Row 1] Find the value of the inner function at x = -3.
\(\small\mathsf{g(-3) =2(-3)^2-5 = 13 }\)
[Row 2] Now, find the value of the outer function at the solution you found in the first step (x = 13).
\(\small\mathsf{ f(13) = 4(13)+3 = 55 }\)
[Row 3 label] Practice 3
[Row 3 drop-down content]
Find \(\small\mathsf{(g \circ f)(1) }\) when \(\small\mathsf{ f(x) = 4x+3 }\) and \(\small\mathsf{g(x) =2x^2-5 }\).
[insert answer reveal button]
[insert highlight table]
[Row 1] Find the value of the inner function at x = 1.
\(\small\mathsf{ f(1) = 4(1)+3 = 7 }\)
[Row 2] Now, find the value of the outer function at the solution you found in the first step (x = 7).
\(\small\mathsf{g(7) =2(7)^2-5 = 93 }\)
[end accordian interactive]
Examples
Accordion tables can be used in all subject areas to provide an both an overview and optional in-depth explanations or examples that students can reveal upon a click. Accordion tables are particularly useful for highlighting an overall process or series of steps, then progressively revealing more details about each stage or step.
|
English Sample |
View Example |
|
Health Sample |
View Example |
|
Science Sample |
View Example |
Customizable Content
Below are the suggested specifications for using images and interactive components within this interactive.
| Optimization |
Constraints:
Preferred image orientation:
|
| Nested Interactives? |
Yes! The following interactive(s) can be used insidse an accordion drop-down content.
|
| Audio/Video? |
| Yes! Audio and Video can be used inside the accordion drop-down content. |
Note: Interactive requests are subject to change, based on content type, image size and usability.
Formatting Template
To use an accordion table in one of your lessons, copy and paste the text shown below, replace the place holder text in brackets. (Remove the brackets after replacing.)
[insert accordion interactive]
[Row 1 Label]
[Row 1 drop-down content]
[Row 2 Label]
[Row 2 drop-down content]
[Row 3 Label]
[Row 3 drop-down content]
[Row 4 Label]
[Row 4 drop-down content]
[end accordion interactive]