What are data-target and data-toggle attributes for?

Question

I need to know what those two attributes are for data-target and data-toggle who stay in inputs, buttons and similar in HTML?

Answer 1

About attributes data-*

HTML5 was created thinking about the extensibility of data that needs to be associated with a given element but does not necessarily have a defined meaning.

Attributes data-*, commonly used together with the framework Bootstrap, allow you to store extra information in standard and semantic HTML elements without the need for hacks as classList, non-standard attributes, extra properties in the DOM or the obsolete method setUserData.

See an example below for tag usage <article>:

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

Note that extra attributes were created for the element in question and added several values to it, without the need to do anything strange and/or non-semantic.

Recommended and interesting reading on the subject in this other answer.

Data Toggle

The data-toggle is an HTML5 data attribute that automatically connects the element to the corresponding type.

For example, if you have a dropdown, as in this other answer:

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>

You can see that through the use of data-toggle is reaffirmed, that the element in question is a dropdown.

Some other elements that are more commonly used:

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

data-toggle, in these examples, declare that the element, respectively, is a modal, accordion, dropdown, and flap structure.

Data Target

The data-target generally used in Bootstrap, it is next to the modals, but not only. By its name, it is understood that it will do reference to its target, objective. This attribute must contain a CSS selector that points to the HTML element that will participate in the event.

See an example, using a modal:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

When you click the button (and if everything is correct), you will open a modal box with the id that is equal to myModal. Without much effort you will be utilizing through the data-target another of the pre-developed Javascript components.

Addendum

You can see the difference when comparing the above code, which will open a modal with id myModal, using the attributes data-* and having to do manual coding, see below:

• Using date attributes-*

<button data-toggle="modal" data-target="#myModal">
    Novo
</button>

• Without using the date attributes-*

<button id="btnModal">
    Novo
</button>

And then on the tag script, would have to encode something similar to this to open the modal:

$("#btnModal").click(function(){
    $("#myModal").modal();
});

---

We have answered questions on this subject in our Big Brother SO, more specifically here and here. Also has this article of MDN, from which I took most of the information.

Note on date attributes-*:

The attribute data-*, as has been said is using more frequently along with the framework Bootstrap. However, it is possible to use its functions through Javascript only:

var article = document.getElementById('electriccars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Or through this example:

var button = document.getElementById('your-button-id');

var cmd = button.getAttribute('data-cmd');
var id = button.getAttribute('data-id');

button.setAttribute('data-cmd', yourNewCmd);
button.setAttribute('data-id', yourNewId);

But, as was said by W3C:

The custom data attributes are intended to store private custom data for the page or application, for which there are no more appropriate attributes or elements.

That said, it is possible to understand that the attribute data-* is intended to store small amounts of invisible data which are not crucial to the user and may become visible later. If the data is crucial to the user, it should be displayed in a visible and more accessible way. Also remembering that semantically speaking, there are elements more appropriate for cases like these.

And although it is possible to manipulate data with Javascript, is not recommended.

Answer 2

As Mr Uzumakiartanis explained very well, the attributes data-* are created to add more information related to the element, and this is widely used in various libraries and plugins.

In the case of data-target and data-toggle, this also happens. Most likely you are talking about the plugin for Bootstrap modal dialogs. This plugin is what defines the meaning of these attributes, not the HTML5 specification.

The bootstrap defined that the plugin Modal will locate all data-toggle="modal" and work with this element to open the dialog window, which is linked to it by the attribute data-target.

Sources:

• Bootstrap Modal
• Get Bootstrap