Skip to content
Related Articles

Related Articles

Improve Article

Data-toggle attributes in Twitter Bootstrap

  • Difficulty Level : Easy
  • Last Updated : 07 Jul, 2021

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=
 
    <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 – 

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=
 
    <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 – 

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

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

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

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

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :