Using Click-And-Reveals to Show More Info in E-Learning #349

Click-and-Reveal Examples in E-Learning #349: Challenge | Recap

Click-and-reveal interactions (tabs, accordions, labeled graphics) are a great way to break up large chunks of information and put content into context for your learners. Similarly, interactive objects like sliders and dials are great ways to reveal more content. Those are tried-and-true solutions that should be part of every course designer's toolkit. Let's look at some other ways to reveal extra content in e-learning.

Using Click-and-Reveals as Quick Guides

Here’s a fresh idea for click-and-reveals. Similar to tooltips and modals, clicking the button reveals more information. But rather than loading the new content over the main page, the page expands to reveal the new content. The reader is in control of how much or little information they pull from the story.

Using Click-and-Reveals as Quick Guides

View the example

Using Click-and-Reveals for Q&A

This example uses the same click-and-reveal event. The only difference is the type of content loaded. In the first example, the interaction revealed links and resources, while this one is used to answer common questions. Unlike the quick guide example, the Q&A content expands way below the fold and could cause the reader to lose their place on the page.

Using Click-and-Reveals for Q&A

View the example

Challenge of the Week

This week, your challenge is to share a click-and-reveal example. You can use go-to interactions like the tabs, accordions, labeled graphics, sliders and dials for your demo or come up with something different or experimental. 

Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own thread and share a link to your published example..
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you reveal your click, drag, slide, or turn examples, check out the insightful tips your fellow challengers shared for succeeding as an e-learning designer:

18 Tips for Succeeding as Freelance E-Learning Designers #348

E-Learning Designer Tips for Freelancers RECAP #348: Challenge | Recap

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

62 Comments