Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Data-toggle attributes in Twitter Bootstrap

Improve Article
Save Article
Like Article
author
prachimantri
contributor
3 published articles
Improve Article
Save Article
Like Article

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:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Data Toggle - Collapse example
    </title>
 
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </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 – 
Javascript



$('.collapse').collapse()
 
 
 
 
2. data-toggle = “dropdown” This can be added to a button to create a toggling drop down menu.
 
HTML



<!DOCTYPE html>
<html>
 
<head>
    <title>
        Data Toggle - Collapse example
    </title>
 
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </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 – 
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.
 
HTML



<!DOCTYPE html>
<html>
 
<head>
    <title>
        Data Toggle - Collapse example
    </title>
 
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </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-
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. 
 
HTML



<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </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-
Javascript



$('body').scrollspy({target: ".navbar"})
 
 
 
 
5. data-toggle = “tab” It is used for smooth transitioning between nav links and their contents. 
 
HTML



<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </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-
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.
HTML



<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </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-
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.
 
HTML



<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </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

My Personal Notes
arrow_drop_up
Last Updated :
07 Jul, 2021
Like Article

Save Article

Similar Reads
1.
How to change the width and height of Twitter Bootstrap's tooltips?
2.
How to Check Twitter Bootstrap is Loaded or not ?
3.
How to use complex HTML with twitter Bootstrap tooltip using jQuery ?
4.
How to use modal closing event in Twitter Bootstrap ?
5.
How to handle the modal closing event in Twitter Bootstrap?
6.
How to Automatically Close Alerts using Twitter Bootstrap ?
7.
How to hide element on small devices in Twitter Bootstrap ?
8.
How to create forms using Twitter Bootstrap ?
9.
How to Add Top Space Between Rows in Twitter Bootstrap ?
10.
Bootstrap 5 Modal Via data attributes
Related Tutorials
1.
Learn Data Structures with Javascript | DSA Tutorial
2.
Onsen UI
3.
React Material UI
4.
NuxtJS
5.
D3.js
Next

p5.js | radians() Function
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
prachimantri
prachimantri
Vote for difficulty
Current difficulty :
Easy





Improved By :
Article Tags :
Practice Tags :
Report Issue 
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox