Intro to Foundation | Lesson #139
This week you’ll learn how to manipulate multiple elements at once by using toggler on a container.
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:
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:
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:
Check Out the Demo: http://codepen.io/kball/details/PGERRN/
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
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.