Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Using A Design System

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating the Accordion Menu

8:43 with Anwar Montasir

Before I create my accordion menu, I’ll create a block of introductory text using the Card Component, with instructions on getting help using a non-partisan voter rights hotline. This information would be a good addition to the downloadable PDF as well. I’ll copy and paste the Accordion Component, focusing at the moment on the collapsed version. We’ll design an expanded panel once we finish creating our list of questions users might have about their voting rights.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Before I create my Accordion Menu, 0:00
    I'll start with a block of introductory text using the Card component, 0:03
    with instructions on getting help using a nonpartisan voter rights hotline. 0:09
    This information would be a good addition to the downloadable PDF as well. 0:27
    I'll copy and paste the Accordion component, 1:00
    focusing at the moment on the collapsed version. 1:03
    We'll design an expanded panel once we finish creating our list of 1:17
    questions users might have about their voting rights. 1:21
    I'm going to start with a question that isn't obvious on 1:28
    the American Civil Liberties Union voting rights page, 1:32
    but one that matters very much to Construction Cal. Am I eligible to vote? 1:36
    I'd like the question to be accompanied by an icon. 1:48
    Since the United States Web Design System limits my choices to what's available at 1:52
    Font Awesome, I'll need to be a bit creative in searching for 1:58
    an icon that suggests voting eligibility. 2:03
    The icon called user-check looks pretty good to me, 2:07
    although I'd want to test my choice on users to make sure it's understood. 2:12
    Once I've created my first Accordion item, 2:53
    I can turn on Repeat Grid to create eight more. 2:56
    For the most part, editing the remaining eight questions will be straightforward, 3:18
    although aligning the icons might prove tricky 3:23
    since I'm working with different symbols in a font. 3:26
    I'll draw out guides to help me align everything properly. 3:30
    My third question, can I check if I'm registered, 3:51
    was inspired by vote.org and isn't found on the ACLU voting rights page. 4:01
    But Dispatcher Dulcea might ask this question. 4:08
    Have I registered to vote already? 4:11
    Once I fill out the registration form, how do I know I'm officially registered? 4:13
    My last two questions, what if I need help understanding English 4:59
    and what if my name is not on the list of registered voters, 5:13
    don't fit on a single line, but that's okay. 5:28
    I'll ungroup my grid and enlarge the rectangles vertically to make room. 5:32
    I'd rather make the messaging understood than force the wording to fit my design. 5:38
    Now I'm ready to replace my icons. 6:27
    Once I finish styling my nine questions, 7:56
    I'm going to copy a Return To Top link from the components document, 7:58
    since my page is fairly tall. 8:04
    I could copy and paste a footer as well, but 8:07
    I haven't given any thought yet what goes into my footer. 8:10
    Feel free to explore this area of the page on your own. 8:15
    In our final video, we'll expand one of the Accordion panels, to make 8:30
    sure we've made our body copy easy to understand and easy to parse visually. 8:35

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up