Product Design Lessons

Intro to Foundation  |   Lesson #139

Advanced Toggler

This week you’ll learn how to manipulate multiple elements at once by using toggler on a container.



Static designs are great for communicating ideas, but some things only really come to life once you add interactions and states. Foundation strives to make that easy by letting you automate many common interactions and states without having to use custom JavaScript.

Today we’re going to be looking at a more advanced use of one of the most fundamental plugins within Foundation - Toggler.

Let’s do a quick review of what Toggler does.

Toggler automates one of the most common interactive patterns on the web - toggling between two states. It works by labeling an element that is the ‘toggle’ with a ‘data-toggle’ attribute to point to what it is toggling. If the element being toggled is a Foundation plugin with 2 obvious states (like a reveal modal that is either open or closed), you don’t need to do any more, that single toggle will do everything you need.

reveal example code

Alternatively, you can toggle arbitrary css classes on your target element by labeling it with a ‘data-toggler’ attribute. This looks like the following:

class toggle example code

This is what gives toggler its power - while the most common use is to change a single element, you can toggle any number of related CSS changes simply by targeting a container. This makes toggle a straightforward way to handle any type of arbitrarily complex component that has two states, without having to write any JavaScript. For today’s lesson, we’ll use the example of an expandable content area where you want to alternate between a ‘read more’ and a ‘read less’ link depending on expanded state.

Creating an expandable comment

1. Set up your container

In order to manipulate a variety of elements within a component all with a single class, you need to structure that component so that it is all wrapped up in a single containing element. You’re probably already structuring your HTML this way, but if not, it is important to start thinking about the logical components and making sure your HTML matches the logical hierarchy as closely as possible. In this case, let’s call this a comment and wrap it up as follows:

Basic Component Code

As you can see, we have a comment that consists of two major parts… a part that will be shown regardless, and a second part that will only be shown after the read more is clicked. We can handle that initial state very simply by having some CSS targeting the .second-text class hiding it. However, to handle the expansion and contraction, we need to do some sort of state. We could point just at the second text with a toggle, like this:

Code with basic toggler use
[see demo]

The problem with this is that our ‘read more’ link is still visible. We need to do a little bit more work...

2. Target the container

The way to attack this problem is to think again about what we’re doing. What we’re really doing is changing a state on the entire component, from unexpanded to expanded, so the natural place to toggle is that component container. From there, we can use CSS to target every element that needs to change. This changes our HTML to something like this:

Final html example

Now we can target everything that needs to change with some simple SCSS based on the container class:

scss example

And if we want to get really fancy, you can add some transitions. Congratulations, you’ve made an interactive, JavaScript-enabled component manipulating multiple subcomponents at once without writing any JavaScript! :)

Check Out the Demo: http://codepen.io/kball/details/PGERRN/


Next Steps

Next Steps:
That’s all you need to know! If you want to dig into more for interactions and components that you can use out of the box, join us for one of next Introduction to Foundation courses!

This lesson is just a taste of the amazing topics you can learn in our University Courses. Check out our next Introduction to Foundation Class. If you're looking to be a Foundation expert, enroll in our Advanced Foundation Class and we'll help you achieve your goals.

About the instructor

Kevin

Kevin is an engineering lead here at ZURB, and spearheads Foundation development. He’s known for being a JavaScript ninja and getting overly excited about obscure technological details