Skip to content
Related Articles

Related Articles

Improve Article

Data-toggle attributes in Twitter Bootstrap

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

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :