JavaScript Responsive Panel

Set the initContent 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="toggleResponsivePanel"></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>
    <div>
        <button id="jqxButton">Learn more</button>
    </div>
</div>

JavaScript

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