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.

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

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:

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:

[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:

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

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/

---