JavaScript Responsive Panel

Set the toggleButton property 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 style="height: 60px; font-family: Verdana; font-size: small;">Resize the browser window to collapse or expand the responsive panel.</div>
<div style="height: 35px;">
    <div id="responsivePanelButton"></div>
</div>
<div id="jqxResponsivePanel" style="padding: 5px;">
     <h4>
            jQWidgets</h4>

    <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
    <p>jQWidgets is a feature complete framework with professional touch-enabled jQuery widgets, themes, input validation, drag & drop plug-ins, data adapters, built-in WAI-ARIA accessibility, internationalization and MVVM support.</p>
</div>

JavaScript

$('#jqxResponsivePanel').jqxResponsivePanel({
    theme: 'energyblue',
    width: 250,
    height: 350,
    collapseBreakpoint: 800,
    toggleButton: $('#responsivePanelButton')
});