The data-toggle attributes in Twitter Bootstrap

Question

What does data-toggle attributes do in Twitter Bootstrap  I couldn t find an answer in Bootstrap API   I have seen a similar question before as well  link  But it didn t help me much

User · Answer

So many answers have been given  but they don t get to the point  Let s fix this   http   www w3schools com bootstrap bootstrap ref js collapse asp To the point   Any attribute starting with data- is not parsed by the HTML5 parser  Bootstrap uses the data-toggle attribute to create collapse functionality    How to use   Only 2 Steps   Add class  collapse  to the element  A you want to collapse  Add data-target   A  and data-toggle  collapse     Purpose  the data-toggle attribute allows us to create a control to collapse expand a div  block  if we use Bootstrap

User · Answer

It is a Bootstrap defined HTML5 data attribute  It binds a button to an event

User · Answer

Any attribute that starts with data- is the prefix for custom attributes used for some specific purpose  that purpose depends on the application   It was added as a semantic remedy to people s heavy use of rel and other attributes for purposes other than their original intended purposes  rel was often used to hold data for things like advanced tooltips    In the case of Bootstrap  I m not familiar with its inner workings  but judging from the name  I d guess it s a hook to allow toggling of the visibility or perhaps a mode of the element it s attached to  such as the collapsable side bar on Octopress org    html5doctor has a good article on the data- attribute    Cycle 2 is another example of extensive use of the data- attribute

User · Answer

The purpose of data-toggle in bootstrap is so you can use jQuery to find all tags of a certain type   For example  you put data-toggle  popover  in all popover tags and then you can use a JQuery selector to find all those tags and run the popover   function to initialize them   You could just as well put class  myPopover  on the tag and use the  myPopover selector to do the same thing   The documentation is confusing  because it makes it appear that something special is going on with that attribute   This   lt div class  container  gt       lt h3 gt Popover Example lt  h3 gt       lt a href     class  myPop  title  Popover1 Header  data-content  Some content inside the popover1  gt Toggle popover1 lt  a gt       lt a href     class  myPop  title  Popover2 Header  data-content  Some content inside the popover2  gt Toggle popover2 lt  a gt   lt  div gt    lt script gt        document  ready function                myPop   popover                lt  script gt    works just fine

User · Answer

From the Bootstrap Docs    lt  --Activate a modal without writing JavaScript  Set data-toggle  modal  on a  controller element  like a button  along with a data-target   foo  or href   foo   to target a specific modal to toggle -- gt    lt button type  button  data-toggle  modal  data-target   myModal  gt Launch modal lt  button gt

User · Answer

The presence of this data-attribute tells Bootstrap to switch between visual or a logical states of another element on user interaction   It is used to show modals  tab content  tooltips and popover menus as well as setting a pressed-state for a toggle-button  It is used in multiple ways without a clear documentation

User · Answer

For example  say you were creating a web application to list and display recipes  You might want your customers to be able to sort the list  display features of the recipes  and so on before they choose the recipe to open  In order to do this  you need to associate things like cooking time  primary ingredient  meal position  and so on right inside the list elements for the recipes     lt li gt  lt a href  recipe1 html  gt Borscht lt  a gt  lt  li gt   lt li gt  lt a href  recipe2 html  gt Chocolate Mousse lt  a gt  lt  li gt   lt li gt  lt a href  recipe3 html  gt Almond Radiccio Salad lt  a gt  lt  li gt   lt li gt  lt a href  recipe4 html  gt Deviled Eggs lt  a gt  lt  li gt    In order to get that information into the page  you could do many different things  You could add comments to each LI element  you could add rel attributes to the list items  you could place all the recipes in separate folders based on time  meal  and ingredient  i e     The solution that most developers took was to use class attributes to store information about the current element  This has several advantages    You can store multiple classes on an element  The class names can be human readable  It   s easy to access classes with JavaScript  className   The class is associated with the element it   s on   But there are some major drawbacks to this method    You have to remember what the classes do  If you forget or a new developer takes over the project  the classes might be removed or changed without realizing that that affects how the application runs  Classes are also used for styling with CSS  and you might duplicate CSS classes with data classes by mistake  ending up with strange styles on your live pages  It   s more difficult to add on multiple data elements  If you have multiple data elements  you need to access them in some way with your JavaScript  either by the name of the class or the position in the class list  But it   s easy to mess up    All the other methods I suggested had these problems as well as others  But since it was the only way to quickly and easily include data  that   s what we did  HTML5 Data Attributes to the Rescue  HTML5 added a new type of attribute to any element   the custom data element  data-    These are custom  denoted by the    attributes that you can add to your HTML elements to define any type of data you want  They consist of two parts   Attribute Name This is the name of the attribute  It must be at least one lowercase character and have the prefix data-  For example  data-main-ingredient  data-cooking-time  data-meal  This is the name of your data   Attribute Vaule Like any other HTML attribute  you include the data itself in quotes separated by an equal sign  This data can be any string that is valid on a web page  For example  data-main-ingredient  chocolate    You can then apply these data attributes to any HTML element you want  For example  you could define the information in the example list above    lt li data-main-ingredient  beets  data-cooking-time  1 hour  data-meal  dinner  gt  lt a href  recipe1 html  gt Borscht lt  a gt  lt  li gt   lt li data-main-ingredient  chocolate  data-cooking-time  30 minutes  data-meal  dessert  gt  lt a href  recipe2 html  gt Chocolate Mousse lt  a gt  lt  li gt   lt li data-main-ingredient  radiccio  data-cooking-time  20 minutes  data-meal  dinner  gt  lt a href  recipe1 html  gt Almond Radiccio Salad lt  a gt  lt  li gt   lt li data-main-ingredient  eggs  data-cooking-time  15 minutes  data-meal  appetizer  gt  lt a href  recipe1 html  gt Deviled Eggs lt  a gt  lt  li gt    Once you have that information in your HTML  you will be able to access it with JavaScript and manipulate the page based on that data

User · Answer

It is a Bootstrap data attribute that automatically hooks up the element to the type of widget it is  Data-  is part of the html5 spec  and data-toggle is specific to Bootstrap   Some Examples   data-toggle  modal  data-toggle  collapse  data-toggle  dropdown  data-toggle  tab    Go through the Bootstrap JavaScript docs and search for data-toggle and you will see it used in the code examples    One working example    x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class  dropdown  gt  x000D     lt a class  dropdown-toggle  data-toggle  dropdown  href     gt Dropdown trigger lt  a gt  x000D     lt ul class  dropdown-menu  role  menu  aria-labelledby  dLabel  gt  x000D       lt li gt  lt a href     gt Item lt  a gt  lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here you can also find more examples for values that data-toggle can have assigned  Just visit the page and then CTRL F to search for data-toggle

User · Answer

Bootstrap leverages HTML5 standards in order to access DOM element attributes easily within javascript   data-      Forms a class of attributes  called custom data attributes  that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts  All such custom data are available via the HTMLElement interface of the element the attribute is set on  The HTMLElement dataset property gives access to them    Reference

[javascript] The data-toggle attributes in Twitter Bootstrap

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to twitter-bootstrap