jQWidgets jqxDropDownButton close() Method

Last Updated : 18 Jan, 2022

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDropDownButton is used to illustrate a jQuery widget that contains a number of selectable as well as expandable items displayed in the dropdown button.

The close() method is used to close the content of the displayed dropdown button. It has no parameter and does not return anything.

Syntax:

$('Selector').jqxDropDownButton('close');

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>

Example: The below example illustrates the jqxDropDownButton close() method in jQWidgets.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="jqwidgets/styles/jqx.base.css"
      type="text/css"
    />
    <script type="text/javascript"
        src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript"
        src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript"
        src="jqwidgets/jqxbuttons.js"></script>
  </head>
 
  <body>
    <center>
      <h1 style="color: green">GeeksforGeeks</h1>
      <h3>jQWidgets jqxDropDownButton close() method</h3>
      <br />
      <div>
        <input
          type="button"
          id="jqxBtn"
          style="margin-bottom: 25px"
          value="Close drop-down button"
        />
      </div>
      <div style="float: center" id="jqxDdB">
        <div id="jqxT">
          <ul>
            <li>GFG</li>
            <li>
              Languages
              <ul>
                <li>C</li>
                <li>Java</li>
              </ul>
            </li>
            <li>
              Subjects
              <ul>
                <li>Data Structure</li>
                <li>Algorithm</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div id="log"></div>
    </center>
 
    <script type="text/javascript">
      $(document).ready(function () {
        $("#jqxBtn").jqxButton({
          width: "200px",
          height: "40px",
        });
 
        $("#jqxDdB").jqxDropDownButton({
          height: "25px",
          width: "70px",
        });
        $("#jqxT").jqxTree({});
        $("#jqxDdB").jqxDropDownButton("setContent", "Select");
 
        $("#jqxBtn").on("click", function () {
          $("#jqxDdB").jqxDropDownButton("close");
          $("#log").html("Button closed");
        });
      });
    </script>
  </body>
</html>