Html DropDownButton

Invoke the isOpened method of the jqxDropDownButton Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget'>
    <div style='float: left;' id="dropDownButton">
        <div style="border: none;" id='jqxTree'>
            <ul>
                <li item-selected='true'>Home</li>
                <li item-expanded='true'>Solutions
                    <ul>
                        <li>Education</li>
                        <li>Solutions
                            <ul>
                                <li>eLearning</li>
                                <li>Mobile</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Products
                    <ul>
                        <li>PC products</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

JavaScript

$("#dropDownButton").jqxDropDownButton({
     width: 150,
     height: 19,
     theme: 'energyblue'
 });
 $("#jqxTree").jqxTree({
     theme: 'energyblue'
 });
 $('#dropDownButton').jqxDropDownButton('setContent', 'Please Select');
 var log = function () {
     var opened = $('#dropDownButton').jqxDropDownButton('isOpened');
     alert(opened ? "DropDown is Opened" : "DropDown is Closed");
 }
 $('#dropDownButton').on('open', function () {
     log();
 });

 $('#dropDownButton').on('close', function () {
     log();
 });