Intro to Foundation | Lesson #117
Show Me, Show Me, Show me, How You Do That Trick
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:
data-toggle="show-more" will be your trigger that toggles the class on your element. The id that this trigger will target is
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 -
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.
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.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.