JavaScript Responsive Panel

Invoke the isCollapsed and isExpanded methods of the jqxResponsivePanel. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="ownerPanel" style="height: 300px; width:800px;">
    <div style="box-sizing: border-box; margin-bottom: 2px; width: 100%; height: 50px; padding: 10px 0 0 10px;">
        <div id="toggleResponsivePanel"></div>
    </div>
    <div id="jqxResponsivePanel">
        <div id="jqxMenu" style="border: none; visibility: hidden;">
            <ul>
                <li><a href="#">Home</a>
                </li>
                <li>About Us
                    <ul>
                        <li><a href="#">History</a>
                        </li>
                        <li><a href="#">Our Vision</a>
                        </li>
                        <li><a href="#">The Team</a>

                            <ul>
                                <li><a href="#">Brigita</a>
                                </li>
                                <li><a href="#">John</a>
                                </li>
                                <li><a href="#">Michael</a>
                                </li>
                                <li><a href="#">Peter</a>
                                </li>
                                <li><a href="#">Sarah</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Clients</a>
                        </li>
                        <li><a href="#">Testimonials</a>
                        </li>
                        <li><a href="#">Press</a>
                        </li>
                        <li><a href="#">FAQs</a>
                        </li>
                    </ul>
                </li>
                <li>Services
                    <ul>
                        <li><a...

CSS

#jqxResponsivePanel, #content {
            float: left;
        }
        .jqx-rc-all {
            border-radius: 0px;
        }

JavaScript

$('#jqxMenu').jqxTree({
              height: '100%',
              width: '100%'
          });
          $('#jqxMenu').css('visibility', 'visible');
          $('#content').jqxPanel();

          $('#jqxResponsivePanel').jqxResponsivePanel({
              width: '30%',
              height: '100%',
              collapseBreakpoint: 700,
              toggleButton: $('#toggleResponsivePanel'),
              animationType: 'none',
              autoClose: false
          });

          $('#jqxResponsivePanel').on('open expand close collapse', function (event) {
              if (event.args.element) return;

              var collapsed = $('#jqxResponsivePanel').jqxResponsivePanel('isCollapsed');
              var opened = $('#jqxResponsivePanel').jqxResponsivePanel('isOpened');

              if (collapsed && !opened) {
                  $('#content').jqxPanel({
                      width: '100%'
                  });
              } else if (collapsed && opened) {
                  $('#content').jqxPanel({
                      width: '65%'
                  });
              } else if (!collapsed) {
                  $('#content').jqxPanel({
                      width: '65%'
                  });
              }
          });

          $('#content').jqxPanel({
              width: '65%',
              height: '100%'
          });


          $("#resizeSmall").jqxButton();
          $("#resizeBig").jqxButton();
          $("#resizeSmall").click(function () {
              $("#ownerPanel").width(500);
              $('#content').jqxPanel({
                  width: '100%'
              });
              $('#jqxResponsivePanel').jqxResponsivePanel('refresh');
          });
          $("#resizeBig").click(function () {
              $("#ownerPanel").width(800);
              $('#content').jqxPanel({
                  width: '65%'
              });
              $('#jqxResponsivePanel').jqxResponsivePanel('refresh');
          });