I took div with unique id for all the grid tables.
<h1>Flexigrid Example Page</h1>
<div id="f1" style="margin-bottom:10px;">
<table id="flex1" style="display:none"></table>
</div>
<div id="f2" style="margin-bottom:10px;">
<table id="flex2" style="display:none"></table>
</div>
<div id="f3" style="margin-bottom:10px;">
<table id="flex3" style="display:none"></table>
</div>
Put options to which I want to see with an event
<select name="options" onchange="javascript:showflexi(this.value)">
<option value="0" selected="selected">Choose one</option>
<option value="1">1st Table</option>
<option value="2">2nd Table</option>
<option value="3">3rd Table</option>
</select>
Now, I have added two line of code inside the
$(document).ready(function()
//add class hideBody to hide the body content of the table
$('.flexigrid').attr('class','flexigrid hideBody');/*as all the grids table get flexigrid class*/
//add class vsble to mark the content is invisible
$('div.ptogtitle').attr('class', ' ptogtitle vsble'); //as all the toggle button get ptogtitle class
Now I have added the showflexi() function to do the action with Choosing the table number
function showflexi(val){
$('.flexigrid').attr('class','flexigrid hideBody');
$('div.ptogtitle').attr('class', ' ptogtitle vsble');
if(val!=0){
$('#f'+val+' .flexigrid').removeClass('hideBody');
$('div.ptogtitle').removeClass('vsble');
}
}