Data-toggle attributes in Twitter 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. 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



Via JavaScript – 

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

$('.collapse').collapse()

chevron_right


 

2. data-toggle = “dropdown” This can be added to a button to create a toggling drop down menu.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Via JavaScript – 

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

$('.dropdown-toggle').dropdown()

chevron_right


 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



Via JavaScript-

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

$("#myModal").modal()

chevron_right


 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Via JavaScript-

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

$('body').scrollspy({target: ".navbar"})

chevron_right


 

5. data-toggle = “tab” It is used for smooth transitioning between nav links and their contents. 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Via JavaScript-



Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

$('.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')

chevron_right


6. data-toggle = “tooltip” It is used to create a small pop-up when the user hovers on the div.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Via JavaScript-

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
  
// Select a specified element
$('#myTooltip').tooltip();

chevron_right


 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.