javascript - How does the data-toggle attribute work? (What's its API?) -

bootstrap uses custom attribute named data-toggle. how feature behave? using require bootstrap's javascript library? also, data-toggle options available. far, count

• collapse
• tab
• modal
• dropdown

what each of these do?

tldr; what's api bootstrap's custom data-toggle attribute?

i think bit confused on purpose of custom data attributes. w3 spec

custom data attributes intended store custom data private page or application, there no more appropriate attributes or elements.

by attribute of data-toggle=value key-value pair, in key "data-toggle" , value "value".

in context of bootstrap, custom data in attribute useless without context javascript library includes data. if @ non-minified version of bootstrap.js can search "data-toggle" , find how being used.

here example of bootstrap javascript code copied straight file regarding use of "data-toggle".

• button toggle

  button.prototype.toggle = function () {   var changed = true   var $parent = this.$element.closest('[data-toggle="buttons"]')    if ($parent.length) {     var $input = this.$element.find('input')     if ($input.prop('type') == 'radio') {       if ($input.prop('checked') && this.$element.hasclass('active')) changed = false       else $parent.find('.active').removeclass('active')     }     if (changed) $input.prop('checked', !this.$element.hasclass('active')).trigger('change')   } else {     this.$element.attr('aria-pressed', !this.$element.hasclass('active'))   }    if (changed) this.$element.toggleclass('active') 

  }

the context code provides shows bootstrap using data-toggle attribute custom query selector process particular element.

from see these data-toggle options:

• collapse
• dropdown
• modal
• tab
• pill
• button(s)

you may want @ bootstrap javascript documentation more specifics of each do, data-toggle attribute toggles element active or not.