In order to use the Panel and Tabs widgets, we need to add references the following javascript and css files:
<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxtabs.js"></script>
<script type="text/javascript" src="jqxscrollbar.js"></script>
<script type="text/javascript" src="jqxbuttons.js"></script>
<script type="text/javascript" src="jqxpanel.js"></script>
We will use the ‘classic’ theme and we included the jqx.classic.css file. For more information about the basics of working with the Tabs and Panel widgets, see the jquery-tabs-getting-started.htm and jquery-panel-getting-started.htm
The next step is to add the HTML structure:
<div id='jqxTabs'>
<ul style="margin-left: 30px;">
<li>Node.js</li>
<li>JavaServer Pages</li>
</ul>
<div>
<div id="panel1" style="border: none;" class="panel">
Node.js is an event-driven I/O server-side JavaScript environment based
on V8. It
is intended for writing scalable network programs such as web servers.
It was created
by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which
employs Dahl.
Similar environments written in other programming languages include
Twisted for
Python, Perl Object Environment for Perl, libevent for C and
EventMachine for Ruby.
Unlike most JavaScript, it is not executed in a web browser, but is
instead a form
of server-side JavaScript. Node.js implements some CommonJS
specifications. Node.js
includes a REPL environment for interactive testing.
</div>
</div>
<div>
<div id="panel2" style="border: none;" class="panel">
JavaServer Pages (JSP) is a Java technology that helps software
developers serve
dynamically generated web pages based on HTML, XML, or other document
types. Released
in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was
designed to address
the perception that the Java programming environment didn't provide
developers with
enough support for the Web. To deploy and run, a compatible web server
with servlet
container is required. The Java Servlet and the JavaServer Pages (JSP)
specifications
from Sun Microsystems and the JCP (Java Community Process) must both be
met by the
container.
</div>
</div>
</div>
The tab’s title is represented by LI tag and it has an associated div tag. We also added the “panel1” and “panel2” div tags as a content in each tab.
The last step is to initialize the Tabs and Panels. To turn the ‘jqxTabs’ div tag into the jqxTabs widget, we are calling the jqxTabs constructor and also set its width, height and theme properties. The initialization of the panels includes selection of all tags with the ‘.panel’ class and calling the jqxPanel constructor.
<script type="text/javascript">
$(document).ready(function () {
//initializing jqxTabs
$('#jqxTabs').jqxTabs({ width: 380, height: 150, theme:
'classic' });
//initializing jqxPanel
$('.panel').jqxPanel({ height: 110, width: 374, autoUpdate: true, theme:
'classic' });
});
</script>

Dynamically adding DIV to jqxPanel not showing the scroll bar.
Can you able to share an example how to add dynamically div to a jqxPanel?
Take a look at the jqxPanel’s API Docs: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxpanel/jquery-panel-api.htm. The jqxPanel widget has methods like append and prepend which enable you to add new content to it.