94

Bootstrap uses a custom attribute named data-toggle. How does this feature behave? Does using it require Bootstrap's JavaScript library? Also, which data-toggle options are available. So far, I count

  • collapse
  • tab
  • modal
  • dropdown

What do each of these do?

TLDR; What's the API for bootstrap's custom data-toggle attribute?

Improve this question
6
  • 4
    Yes it requires the bootstrap.js library to work
    – zgood
    Commented Jun 3, 2015 at 20:29
  • None of the answers fit what I wanted: really, I think what I wanted was Documentation, so I'll go request a topic.
    – jpaugh
    Commented Aug 31, 2016 at 17:50
  • Also, this question receives a lot of traffic, but no up-votes. I plan to delete it, but am leaving it here for now, for reference from the Documentation topic request page.
    – jpaugh
    Commented Aug 31, 2016 at 17:53
  • 4
    yes... lots of traffic and a great answer by @rogergarrison which should have been accepted. He may not have been able to read your mind, but he did a great job of answer the question as it was posed.
    – ChronoFish
    Commented Mar 28, 2018 at 14:13
  • 1
    But awarding rogergarrison the green checkmark isn't [hard]. ;^) 100% agree with @ChronoFish. If you want docs but there aren't docs, you have to accept either Roger's "docs" given here... or, though it doesn't really help anyone, an answer that says, "There ain't API docs for that" or "42" or something. It doesn't help his answer (or us) to say, "It's an unanswerable question." To the extent that it is answerable, he's answered. Close the question by accepting. You can move the check if something better comes along.
    – ruffin
    Commented Jun 25, 2021 at 14:40

3 Answers 3

Reset to default
96

I think you are a bit confused on the purpose of custom data attributes. From the w3 spec

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

By itself an attribute of data-toggle=value is basically a key-value pair, in which the key is "data-toggle" and the value is "value".

In the context of Bootstrap, the custom data in the attribute is almost useless without the context that their JavaScript library includes for the data. If you look at the non-minified version of bootstrap.js then you can do a search for "data-toggle" and find how it is being used.

Here is an example of Bootstrap JavaScript code that I copied straight from the file regarding the 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 that the code provides shows that Bootstrap is using the data-toggle attribute as a custom query selector to process the particular element.

From what I see these are the data-toggle options:

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

You may want to look at the Bootstrap JavaScript documentation to get more specifics of what each do, but basically the data-toggle attribute toggles the element to active or not.

Improve this answer
5
  • 4
    Yes. That is my question. (You're rephrasing the question, instead of answering it.) What I want most, is a "canonical" place to document this feature of bootstrap.
    – jpaugh
    Commented Jun 4, 2015 at 16:57
  • 23
    How did I not answer it? 1) Yes, It requires JavaScript to use the toggle. 2) the feature is implemented in JavaScript using the attribute as a query selector see the code sample 3) Gave a list of values that the data-toggle can have 4) API documentation is at Bootstrap JavaScript Documentation. A canonical place would be the JavaScript file itself. can't get more canonical than that.
    – rogergarrison
    Commented Jun 4, 2015 at 17:09
  • FYI: What I wanted is not a good fit for Stack Overflow. Instead, I created a documentation request over here.
    – jpaugh
    Commented Aug 31, 2016 at 17:55
  • 1
    Please keep in mind that "buttons" and "button" attach a different plugin.
    – Karl
    Commented Jan 16, 2018 at 10:55
  • So, what does $('[data-toggle="tooltip"]').tooltip() do when executed in jquery?
    – wings77
    Commented Apr 2, 2023 at 13:07
7

The data-* attributes is used to store custom data private to the page or application

So Bootstrap uses these attributes for saving states of objects

W3School data-* description

Improve this answer
3
  • Yes. I mentioned that in my question.
    – jpaugh
    Commented Jun 3, 2015 at 20:43
  • 2
    I am more interested in the API presented by Bootstrap's use of these. The docs don't state that as such.
    – jpaugh
    Commented Jun 3, 2015 at 20:44
  • FYI: What I wanted is not a good fit for Stack Overflow. Instead, I created a documentation request over here.
    – jpaugh
    Commented Aug 31, 2016 at 17:55
2

The data-toggle attribute simple tell Bootstrap what exactly to do by giving it the name of the toggle action it is about to perform on a target element. If you specify collapse. It means bootstrap will collapse or uncollapse the element pointed by data-target of the action you clicked

Note: the target element must have the appropriate class for bootstrap to carry out the action

Source action:
data-toggle = collapse //type of toggle
data-target = #myDiv

Target:
class=collapse //I can collapse
id=myDiv

This is same for other type of toggle actions like tab, modal, dropdown

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.