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:

You'll find a link to the demo here.

---