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. For example, if you select an element and give the property of data-toggle as “collapse”, you’re basically making your div collapsible in just minutes by using Bootstrap.
There are 7 values to this attribute.
1. data-toggle = “collapse” It is used when you want to hide a section and make it appear only when a div is clicked. Say, the div is a button, so when the button is clicked, the section that you want to collapse appears and re-appears using the button.
Example:
<!DOCTYPE html> < html >
< head >
< title >
Data Toggle - Collapse example
</ title >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h2 >Welcome To GFG</ h2 >
< button type = "button"
class = "btn btn-primary"
data-toggle = "collapse"
data-target = "#learnMore" >
Learn More
</ button >
< div id = "learnMore" class = "collapse" >
GeeksforGeeks is a computer science
portal where you can learn
programming. It is a platform
where you can practice multiple
languages content and many more.
</ div >
</ body >
</ html >
|
Output:
Via JavaScript –
$( '.collapse' ).collapse()
|
2. data-toggle = “dropdown” This can be added to a button to create a toggling drop down menu.
<!DOCTYPE html> < html >
< head >
< title >
Data Toggle - Collapse example
</ title >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h2 >Welcome To GFG</ h2 >
< div class = "dropdown" >
< button type = "button"
class = "btn btn-primary"
id = "dropDownButton"
data-toggle = "dropdown"
aria-expanded = "false" >
Programming Languages
< span class = "caret" ></ span >
</ button >
< ul class = "dropdown-menu"
aria-labelledby = "dropDownButton" >
< li >< a href = "#" >C++</ a ></ li >
< li >< a href = "#" >Python</ a ></ li >
< li >< a href = "#" >R</ a ></ li >
< li >< a href = "#" >Java</ a ></ li >
</ ul >
</ div >
</ body >
</ html >
|
Output:
Via JavaScript –
$( '.dropdown-toggle' ).dropdown()
|
3. data-toggle = “modal” Modal is dialog box/pop up displayed on the top of a page when an event occurs. For example, when a button is clicked, a pop-up appears.
<!DOCTYPE html> < html >
< head >
< title >
Data Toggle - Collapse example
</ title >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h2 >Welcome To GFG</ h2 >
< button type = "button"
class = "btn btn-primary"
data-toggle = "modal"
data-target = "#modalExample" >
Click here!
</ button >
<!-- Modal -->
< div class = "modal fade"
id = "modalExample" role = "dialog" >
< div class = "modal-dialog" >
<!-- Modal content-->
< div class = "modal-content" >
< div class = "modal-header" >
< h1 class = "modal-title" >
Welcome!
</ h1 >
</ div >
< div class = "modal-body" >
< p >
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</ p >
</ div >
< div class = "modal-footer" >
< button type = "button"
class = "btn btn-primary" >
Go to GFG
</ button >
< button type = "button"
class = "btn btn-default"
data-dismiss = "modal" >
Close
</ button >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Via JavaScript-
$( "#myModal" ).modal()
|
4. data-toggle = “scrollspy” Scrollspy is used to update/highlight the nav links according to scroll position. As you scroll down, the nav of that particular section gets highlighted.
<!DOCTYPE html> < html >
< head >
< title >
Bootstrap Example
</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< style >
body {
position: relative;
}
#about {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #510707;
}
#team {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #492020;
}
#Contact {
padding-top: 50px;
height: 500px;
color: #fff;
background-color: #165f8b;
}
</ style >
</ head >
< body data-spy = "scroll"
data-target = ".navbar"
data-offset = "50" >
< nav class="navbar navbar-inverse
navbar-fixed-top">
< div class = "container-fluid" >
< div class = "navbar-header" >
< button type = "button"
class = "navbar-toggle"
data-toggle = "collapse"
data-target = "#myNavbar" >
< span class = "icon-bar" >
</ span >
< span class = "icon-bar" >
</ span >
< span class = "icon-bar" >
</ span >
</ button >
< a class = "navbar-brand"
href = "#" >GFG</ a >
</ div >
< div >
< div class = "collapse navbar-collapse"
id = "myNavbar" >
< ul class = "nav navbar-nav" >
< li >< a href = "#about" >
About
</ a ></ li >
< li >< a href = "#team" >
Team
</ a ></ li >
< li >< a href = "#contact" >
Contact
</ a ></ li >
</ ul >
</ div >
</ div >
</ div >
</ nav >
< div id = "about" class = "container-fluid" >
< h1 >About</ h1 >
< p >
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</ p >
</ div >
< div id = "team" class = "container-fluid" >
< h1 >The team</ h1 >
< p >
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</ p >
</ div >
< div id = "contact" class = "container-fluid" >
< h1 >Contact Us!</ h1 >
< p >
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</ p >
</ div >
</ body >
</ html >
|
Output:
Via JavaScript-
$( 'body' ).scrollspy({target: ".navbar" })
|
5. data-toggle = “tab” It is used for smooth transitioning between nav links and their contents.
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap Example</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< ul class = "nav nav-tabs" >
< li class = "active" >
< a data-toggle = "tab"
href = "#home" >Home</ a >
</ li >
< li >
< a data-toggle = "tab"
href = "#about" >About</ a >
</ li >
< li >
< a data-toggle = "tab"
href = "#team" >Team</ a >
</ li >
< li >< a data-toggle = "tab"
href = "#contact" >Contact</ a >
</ li >
</ ul >
< div class = "tab-content" >
< div id = "home" class =
"tab-pane fade in active" >
< h3 >HOME</ h3 >
< p >
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</ p >
</ div >
< div id = "about" class = "tab-pane fade" >
< h3 >ABOUT</ h3 >
< p >
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</ p >
</ div >
< div id = "team" class = "tab-pane fade" >
< h3 >TEAM</ h3 >
< p >
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</ p >
</ div >
< div id = "contact" class = "tab-pane fade" >
< h3 >CONTACT</ h3 >
< p >
GeeksforGeeks is a computer
science portal where you can
learn programming. It is a
platform where you can practice
multiple languages content and
many more.
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Via JavaScript-
$( '.nav-tabs a' ).click( function (){
$( this ).tab( 'show' );
}) $( '.nav-tabs a[href="#home"]' ).tab( 'show' )
$( '.nav-tabs a:home' ).tab( 'show' )
$( '.nav-tabs a:team' ).tab( 'show' )
|
6. data-toggle = “tooltip” It is used to create a small pop-up when the user hovers on the div.
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap Example</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< a href = "#" data-toggle = "tooltip"
title = "Some tooltip text!" >
Hover over me!
</ a >
< div class = "tooltip top" role = "tooltip" >
< div class = "tooltip-arrow" ></ div >
< div class = "tooltip-inner" >
Hi, welcome!
</ div >
</ div >
</ body >
</ html >
|
Output:
Via JavaScript-
// Select all elements with data-toggle="tooltips" in the document $( '[data-toggle="tooltip"]' ).tooltip();
// Select a specified element $( '#myTooltip' ).tooltip();
|
7. data-toggle = “popover” It is very similar to tooltip, only difference being that it can hold more text and can have a header.
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap Example</ title >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< button type = "button"
class = "btn btn-default"
data-container = "body"
data-toggle = "popover"
data-placement = "bottom"
data-content="Vivamus
sagittis lacus vel augue
laoreet rutrum faucibus">
Popover on bottom
</ button >
</ body >
</ html >
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari