jQuery Mobile panel swipeClose Option

Last Updated : 26 Jan, 2022

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 be using the jQuery Mobile panel swipeClose option to set whether the panel can be closed by swiping left or right over the panel.

Syntax:

Initializing the panel with the swipeClose option.

$( ".selector" ).panel({
swipeClose: true
});

Setting the swipeClose option.

$( ".selector" ).panel( "option", "swipeClose", true );

Getting the swipeClose option.

var theme = $( ".selector" ).panel( "option", "swipeClose" );

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

Example: This example describes the jQuery Mobile panel swipeClose option. In the below example, the panel get closed by swiping left-wise on the panel.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> 
    <script src= 
"//code.jquery.com/jquery-3.2.1.min.js"> 
    </script> 
    <script src= 
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div data-role="page"> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
            <h3>jQuery Mobile panel swipeClose Option</h3> 
            <div role="main"> 
                <a href="#GFG" data-role="button" data-inline="true" 
                   data-icon="bars">GeeksforGeeks</a> 
            </div> 
            <div data-role="panel" id="GFG" data-theme="b"> 
                <div class="panel-content"> 
                    <h3>GeeksforGeeks</h3> 
                    <p>It is a computer science portal.</p> 
  
                    <a href="#demo-links" data-rel="close" 
                       data-role="button" data-theme="c" 
                       data-icon="delete"
                        data-inline="true">Close this panel</a> 
                </div> 
            </div> 
            <input type="button" id="Button" 
                   value="Value of the swipeClose option"> 
            <div id="log"></div> 
        </div> 
    </center> 
    <script> 
        $(document).ready(function () { 
            $("#GFG").panel({ 
                swipeClose: true 
            }); 
            $("#GFG").panel("option", "swipeClose", true); 
            $("#Button").on('click', function () { 
                var a = $("#GFG").panel("option", "swipeClose"); 
                $("#log").html(a); 
            }); 
        }); 
    </script> 
</body> 
  
</html>