Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where does "data-toggle" attribute of bootstrap framework come from?

I am trying to use some of the jQuery plugins for the Bootstrap framework and they use an attribute named "data-toggle". I am getting the warning "attribute data toggle is not a valid atribute of a".

Where does data-toggle come form?

like image 682
James Avatar asked May 07 '12 11:05

James


People also ask

What is data toggle attribute in Bootstrap?

The data-toggle is an HTML-5 data attribute defined in Bootstrap. The advantage of using this is that, you can select a class or an id and hook up the element with a particular widget.

What is data toggle and data target in Bootstrap?

The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So whenever a link like that is clicked, a modal with an id of “basicModal” will appear.

What is Bootstrap toggle?

Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.

How do you toggle data in JavaScript?

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.


2 Answers

In HTML5, any attribute that starts with data- is a valid custom attribute. Basically, it's a way to attach custom data to elements that aren't explicitly defined in the HTML specification.

In earlier versions of HTML, this does not validate, however. Don't worry about that too much though. Browsers generally just ignore attributes they don't know about. This doesn't stop libraries like jQuery from reading them.

like image 102
Richard Neil Ilagan Avatar answered Oct 03 '22 21:10

Richard Neil Ilagan


If you look in the JavaScript Collapse plugin documentation of Bootstrap you will find a reasonably clear example of the workings of the collapse API and the relationship and uses of the pair data-toggle (which triggers the functionality) and data-target (which sets the behavior), plus other interesting tidbits.

like image 45
cucu8 Avatar answered Oct 03 '22 20:10

cucu8