Blogs

This post is about the jQuery NavigationBar(Accordion) widget and will show you how to add it to your page. The NavigationBar widget is a set of collapsible panels that can store a large amount of content in a compact space. Site visitors hide or reveal the content stored in the widget by clicking the header of the panel. The panels of the widget expand or collapse accordingly as the visitor clicks different headers. In a classical jQuery Accordion widget implementation, only one content panel is open and visible at a given time, but we decided that it would be useful to add a feature to our NavigationBar which allows multiple content panels to be visible at the same time. The following example shows the jqxNavigationBar widget, with the first panel expanded: The example below shows the jqxNavigationBar with multiple expanded items. The default HTML code for the jqxNavigationBar widget comprises an outer div tag that contains all of the panels, header div and content div tag for each panel. Following is the HTML code for creating a jqxNavigationBar widget:

<div id='jqxNavigationBar'>
    <div>
          Header 1
    </div>
    <div>
          Content 1
    </div>
    <div>
          Header 2
    </div>
    <div>
          Content 2
    </div>
    <div>
          Header 3
    </div>
    <div>
          Content 3
    </div> 
</div>

The script tag in the head of the document defines all of the JavaScript functions related to the jQuery NavigationBar widget.

<!-- add the jQuery script -->
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>	
<!-- add the jQWidgets framework -->
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<!-- add one or more widgets -->
<script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="jqwidgets/jqxnavigationbar.js"></script>	
<!-- add one of the jQWidgets styles -->
<link rel="stylesheet" href="jqwidgets/styles/jqx.darkblue.css" type="text/css" />

The script tag below creates a JavaScript object that makes the jqxNavigationBar interactive.

<script type="text/javascript">
 $(document).ready(function () {
      // Create jqxNavigationBar
     $("#jqxNavigationBar").jqxNavigationBar({ width: 400, height: 420, sizeMode: 'fitAvailableHeight' });
 });
</script>

To see the jqxNavigationBar in action, check out our Online Demos.