Target HTML elements with the “data” attribute

I wanted to toggle the visibility of an HTML element using the data attribute. Sure, I could have used a class or the id of the element, but because the purpose of the JavaScript had nothing to do with the visual design (i.e. style), I wanted to add a data-* element and target it that way.

Basically you have to give the HTML element (ex. a DIV ) an attribute that begins with data-. In the example below, I have an element that looks like:

<input type="button" data-visibilityItem="btn-directory-details" />

And another one like this:

<div data-visibilityItem="directory-details"></div>

Upon clicking a button, I wanted to hide the button, and show the details. I have this JavaScript code, using jQuery to hide/show the elements: