jQuery Mobile Toolbar tapToggle Option

Last Updated : 14 Mar, 2022

jQuery Mobile is a JavaScript library built on top of jQuery. It is used to create responsive websites which are accessible on devices of various screen sizes like phones, tabs, and desktops.

In this article, we will use the jQuery Mobile Toolbar tapToggle option. The tapToggle option defines whether a fixed toolbar's visibility can be toggled by tapping on the screen. If tapToggle is set to a false, the toolbar's visibility cannot be toggled by tapping on the screen. The default value is true.

Syntax:

$(".selector").toolbar({
  tapToggle: false
});

Get the tapToggle option:

var tapToggle = $(".selector").toolbar( "option", "tapToggle" );

Set the tapToggle option:

$(".selector").toolbar( "option", "tapToggle", false );

CDN Links:

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

Example 1: In the example below the tapToggle option is set to true by default.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>

    <script>
        $(document).ready(function () {
            $("#divID").toolbar({
                tapToggle: true
            });
        })
    </script>
</head>

<body>
    <div data-role="page">
        <center>
            <h2 style="color:green">
                GeeksforGeeks
            </h2>
            <h3>jQuery Mobile Toolbar tapToggle option</h3>
            
            <div id="divID" data-role="header" 
                data-position="fixed">
                <h1>Toolbar</h1>
            </div>

            <h2>What is GeekforGeeks?</h2>
            
            <p style="padding:0px 20px;">
                GeeksforGeeks is a computer science 
                portal for geeks by geeks.Here you 
                can find articles on various computer 
                science topics like Data Structures, 
                Algorithms and many more....
                GeekforGeeks was founded by Sandeep 
                Jain in 2009.GeeksforGeeks also provide 
                courses, you can find the courses at<br />
                <a href=
                "https://www.geeksforgeeks.org/courses">
                https://www.geeksforgeeks.org/courses
                </a>
                For cracking interviews of top product based 
                companies, you need to have good and deep 
                understanding of topics like DSA, System 
                design etc. GeeksforGeeks provide you quality 
                content so that you can prepare for the 
                interviews. GeeksforGeeks also have a 
                practice portal where you can practice 
                problems and brush on your skills.You can 
                visit the practice portal at<br />
                <a href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org
                </a>
            </p>

        </center>
    </div>
</body>

</html>

Output:

Example 2: In the example below, the tapToggle option is set to false. You can see in the output below the visibility of the header toolbar is not affected when we click on the page.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>

    <script>
        $(document).ready(function () {
            $("#divID").toolbar({
                tapToggle: false
            });
        })
    </script>
</head>

<body>
    <div data-role="page">
        <center>
            <h2 style="color:green">
                GeeksforGeeks
            </h2>
            <h3>jQuery Mobile Toolbar tapToggle option</h3>
            
            <div id="divID" data-role="header" 
                data-position="fixed">
                <h1>Toolbar</h1>
            </div>

            <h2>What is GeekforGeeks?</h2>
            
            <p style="padding:0px 20px;">
                GeeksforGeeks is a computer science 
                portal for geeks by geeks.Here you 
                can find articles on various computer 
                science topics like Data Structures, 
                Algorithms and many more....
                GeekforGeeks was founded by Sandeep 
                Jain in 2009.GeeksforGeeks also provide 
                courses, you can find the courses at<br />
                <a href=
                "https://www.geeksforgeeks.org/courses">
                https://www.geeksforgeeks.org/courses
                </a>
                For cracking interviews of top product based 
                companies, you need to have good and deep 
                understanding of topics like DSA, System 
                design etc. GeeksforGeeks provide you quality 
                content so that you can prepare for the 
                interviews. GeeksforGeeks also have a 
                practice portal where you can practice 
                problems and brush on your skills.You can 
                visit the practice portal at<br />
                <a href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org
                </a>
            </p>

        </center>
    </div>
</body>

</html>