Open In App

jQuery Mobile Listview hideDividersOption

Improve
Improve
Like Article
Like
Save
Share
Report

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 Listview hideDividers option. This option is given by the “listview.hideDividers” extension and when the value of this option is set to “true”, then all list items residing under a given divider become hidden, then the divider itself is hidden.

Syntax:

Initializing the listview with the hideDividers option.

$( ".selector" ).listview({
   hideDividers: true
});
  • Setting the hideDividers option.

    $( ".selector" ).listview( "option", "hideDividers", true );
  • Getting the hideDividers option.

    var themeClass = $( ".selector" )
        .listview( "option", "hideDividers" );

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 demonstrates the jQuery Mobile Listview hideDividers option.

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 Listview hideDividers Option</h3>
            <div id="divID">
                <div role="main" class="ui-content">
                    <ul data-role="listview">
                        <li><a href="index.html">
                             GeeksforGeeks
                            </a>
                        </li>
                        <li><a href="index.html">
                             GFG
                            </a>
                        </li>
                        <li><a href="index.html">
                             gfg
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <input type="button" id="Button" 
                   value="Value of the hideDividers Option">
            <div id="log"></div>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $("#divID").listview({
                hideDividers: true
            });
            $("#divID").listview("option", "hideDividers", true);
            $("#Button").on('click', function () {
                var a = $("#divID").listview("option", "hideDividers");
                $("#log").html(a);
            });
        });
    </script>
</body>
</html>


Output:

jQuery Mobile Listview hideDividersOption

jQuery Mobile Listview hideDividersOption

Reference: https://api.jquerymobile.com/listview/#option-hideDividers



Last Updated : 24 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads