jQuery NavigationBar

Set the expandMode property of the jqxNavigationBar. Author: http://jqwidgets.com

by mark edwards

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxNavigationBar'>
    <!--Header-->
    <div>
      <div data-rowNbr=0>
        <span data-stuff='Data One' class='clicker'>Header 1</span>
        <span data-stuff='Data Two'  class='clicker'>Header 2</span>
        <span data-stuff='Data Three'  class='clicker'>Header 3</span>
        <span data-stuff='Data Four'  class='clicker'>Header 4</span>
      </div>
    </div>
    <!--Content-->
    <div id='ContentOne'>Content 1!</div>
    <!--Header-->
    <div>
      <div data-rowNbr=1>
        <span data-stuff='Data Five'   class='clicker'>Header 5</span>
        <span data-stuff='Data Six'    class='clicker'>Header 6</span>
        <span data-stuff='Data Seven'  class='clicker'>Header 7</span>
        <span data-stuff='Data Eight'  class='clicker'>Header 8</span>
      </div>
    </div>
    <!--Content-->
    <div id='ContentTwo'>Content 2!</div>
</div>

JavaScript

$("#jqxNavigationBar").jqxNavigationBar({
      width: 400,
      height:200,
      theme:'energyblue',
      expandMode:'toggle'
    });
    
$('.clicker').on('click', (e)=> {
    let idAttr = $(e.currentTarget).parent().parent().parent().next().attr('id')
    $('div#' + idAttr).html( $(e.currentTarget).attr("data-stuff") );
     // $('div#' + idAttr).html(e.currentTarget.textContent);
    itemClicked = false;
    
    let expandedIndexes
             = $("#jqxNavigationBar").jqxNavigationBar("expandedIndexes");
    if (expandedIndexes.length !== 0) {
     	for(let i in expandedIndexes) {
        let index = expandedIndexes[i];
        $('#jqxNavigationBar').jqxNavigationBar('collapseAt', index);
      }
    }
    
    //for ( let x=0; x < $('#jqxNavigationBar').children().length/2; x++ ) {
    //    $('#jqxNavigationBar').jqxNavigationBar('collapseAt', x);
    //}
    itemClicked = true;
    itemRow = $(e.currentTarget).parent().attr("data-rowNbr");
})

var itemClicked =false;
var itemRow = -1;

$('#jqxNavigationBar').on('collapsedItem',(e)=>{
   if  ( itemClicked ) {
       $('#jqxNavigationBar').jqxNavigationBar ('expandAt', itemRow);
       itemClicked=false;
   }
});