jQuery Mobile Toolbar enable() Method

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>

Output:

Reference: https://api.jquerymobile.com/toolbar/#method-toggle

jQuery Mobile Toolbar enable() Method

vpsop

Improve

Article Tags :

Similar Reads

jQuery Mobile Toolbar option() Method

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. The rangeslider widget of jQuery Mobile is a double handle slider. The sliders have a min and a max value to be set and we can choos

jQuery Mobile Toolbar show() Method

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 the jQuery Mobile Toolbar show() method to display t

jQuery Mobile Toolbar refresh() Method

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will use the jQuery Mobile Toolbar refresh() method to update the toolbar. This method is used to update the visual styling. Syntax: $("selector

jQuery Mobile Toolbar hide() Method

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 the jQuery Mobile Toolbar hide() method to hide a to

jQuery Mobile Toolbar enable() Method

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 the jQuery Mobile Toolbar enable() method to enable

jQuery Mobile panel toggle() Method

jQuery Mobile is a JavaScript library that is used to develop responsive websites and web applications. It is built on top of jQuery. In this article, we will use the jQuery Mobile panel toggle() method to toggle the state of the panel, that is, if the panel is closed, it will open and if it is open

jQuery Mobile Toolbar disable() Method

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 the jQuery Mobile Toolbar disable() method to disabl

jQuery Mobile Toolbar destroy() Method

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will use the jQuery Mobile Toolbar destroy() method to destroy the toolbar. The destroy() method completely removes the toolbar functionality fr

jQuery Mobile Toolbar tapToggle Option

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 whethe

jQuery Mobile panel open() Method

jQuery Mobile is a JavaScript library that is used to develop responsive websites and web applications. It is built on top of jQuery. In this article, we will use the jQuery Mobile panel open() method to open a panel. The panel open() does not accept any arguments. Syntax: $(".selector").panel( "ope