jQuery Mobile Toolbar toggle() Method

Last Updated : 22 Dec, 2021

jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops.

In this article, we will use jQuery Mobile Toolbar toggle() method to toggle the visibility of the toolbar, that is, if the toolbar is hidden, it will become visible again and if the toolbar is visible it will be hidden. It is provided by the fixedToolbar extension.

Syntax:

$(".selector").toolbar("toggle");

Parameters: This method does not accept any parameters.

CDN Links: We must include jQuery mobile in our code before using it in the project.

<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: This example describes the jQuery Mobile Toolbar toggle() method.

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> 
        function toggle() { 
            $("#GFG").toolbar("toggle"); 
        } 
    </script> 
</head> 
  
<body> 
    <div data-role="page"> 
        <center> 
            <h2 style="color: green;"> 
              GeeksForGeeks 
            </h2> 
            <h3>jQuery Mobile Toolbar toggle() method</h3> 
        </center> 
        <div id="GFG" data-role="header"> 
            <h1>This is a header toolbar</h1> 
        </div> 
  
        <button onclick="toggle();"> 
          Toggle ToolBar 
        </button> 
    </div> 
</body> 
  
</html>