Product Design Lessons

Intro to Foundation  |   Lesson #117

Show Me, Show Me, Show me, How You Do That Trick

Create a custom component without using JavaScript

Adding some dynamic interactions to you pages can be very useful to show changes of state or accomplish more complex UI patterns. But what if you’re in a hurry or not too confident with JavaScript? Foundation 6 shipped with a super handy Toggler component which let’s you quickly toggle CSS classes on elements to create more dynamic UI. In this lesson you’ll learn how to use Toggler to create a “Show More” link and animate your content with MotionUI.

A “Show More” link is a very common pattern used across the web. Toggler allows you to use the JQuery toggleclass function without writing any jQuery. Here’s an example of what we’re making:

Create A Trigger

Assuming you have some introduction copy that will compel your users to want to read on, we’ll add the “Show More” button:

The data-toggle="show-more" will be your trigger that toggles the class on your element. The id that this trigger will target is show-more.

Next we’ll add the matching id to the element we’re targeting:

The id here matches the id in the data-toggle on the trigger. The class called in the data-toggler attribute is the class that will be toggled. So in this case, using the .hide class in Foundation applies display: none; to the element.

To hide this content by default until the trigger is clicked, you can use CSS:

That’s all you need to create a simple Toggler component!

Animating Your Component

Let’s take this a step further and add some funky animations.

Foundation 6 comes with a handy animation library called MotionUI. We’ll use it in conjunction with Toggler to animate our content in and out.

Back to our content div; We’ll add our animation attribute:

So now, instead of toggling a .hide class on the element, we’ll activate Toggler with the attribute alone - data-toggler

MotionUI classes can be added in the data-animate attribute. In this example we used some silly animation classes for fun. The first class is the animation that occurs when the element is toggled on and the second is when it is toggled out.

There are lots of available transition classes you can use instead. Here are some common ones:

  • .fade-in
  • .fade-out
  • .spin-in
  • .spin-out
  • .slide-in-down
  • .slide-in-left
  • .hinge-in-from-top
  • .hinge-out-from-top
  • .slide-out-down
  • .slide-out-left
  • .scale-in-up
  • .scale-in-down

You'll find a link to the demo here.

Next Steps

Toggling classes is the most common jQuery function and most often needed to add some interactivity to your pages. So now you have the ability to quickly prototype some interaction without writing any JavaScript or jQuery. There’s lot’s of useful components you can create with Toggler. We’d love to see what you make!

Boost your skills in our Introduction to Foundation 6 course

Achieve maximum thrust by learning how to use Foundation 6 to power your projects. The Foundation team will get you up to speed on everything you need to know to get the most out of Foundation 6.

About the instructor


Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.