Foundation’s components give you a ton of great functionality right out of the box. They let you build interactive websites that would typically require a bunch of JavaScript. With Foundation, you can set up powerful components purely in HTML, without ever having to write your own JavaScript. In this lesson we’re going to look at how Foundation uses data attributes to communicate JavaScript configuration options from your HTML, to get the behavior you want.

HTML Attributes

First off, let’s talk a little bit about the types of attributes you might want to set on an HTML element.

Let’s take a look at a simple Slider example:

[See Codepen Example]

In this example you can see the three different types of attributes - ids, classes, and data attributes - that we use regularly in Foundation. Our focus in today’s lesson will be data attributes. First lets briefly outline how we use each of these attributes.

Diving into Data Attributes

Foundation’s components use data-attributes for everything that involves passing information to the JavaScript. You use them to indicate what a component is (e.g. data-slider), as well as being able to manipulate any javascript-enabled option within the component. To understand what is available to manipulate, take a look at the component docs page, and scroll down to the very bottom. For slider in particular, it looks like:

As you can see, we can manipulate a great number of different elements of the slider simply by setting different data attributes. For example, we can make our slider step up and down in increments of 5 simply by adding data-step=”5” to the code. Data-options will be added into the HTML on the parent element of the component like so:

[See Codepen Example]

You can string together many data-options as needed. You can string them together like this (notice the syntax difference):

Or separately like this:

Bridging across components

We’ve now looked at how you can update a component simply by changing data attributes. Let’s look at a slightly more complex example where we want to open one component (say a Reveal modal) from another (a link or button).

Take a look at this example, straight from the documentation:

[See Codepen Example]

In this case we have two pieces: the Reveal modal, which is made into a Reveal using the data-reveal attribute, and a link that is intended to open it. You can see that the link uses a data-open attribute containing a name (data-open=”exampleModal1”). Recall how we mentioned above that we use IDs for targeting? When Foundation sees that name, exampleModal1, it looks immediately for an element with the ID exampleModal1. Finding our reveal with that id, it knows what it is supposed to open, and opens it.

---