Almost got it perfect. Here is the code I am working on. When I open the existing panel which has been hidden, it automatically move the panel in display at the end of the newly opened panel and shows it. I want the other panel to be hidden.
$(function(){
$('#pp').portal({
border:false,
fit:true,
});
add('menu', '');
});
function add(link, title){
var p = findPanel('#pp',title);
if(p){
$.extend(p.panel('options'), {
onOpen: function(){
var prevPanel = $(this).parent().prev().children('.panel-body');
prevPanel.panel('close');
},
onClose: function(){
var panels = $('#pp').portal('getPanels', 0);
if ($(panels[panels.length-1])[0] == this){
var prevPanel = $(this).parent().prev();
prevPanel.children('.panel-body').panel('open');
$(this).panel('destroy');
}
}
});
p.panel('open');
$('#pp').portal('resize');
}else{
var p = $('<div id="pgrid" border="0"><div/>').appendTo('body');
p.panel({
title:title,
href: 'views/'+link+'.php',
height:screen.height-190,
maximizable:false,
closable:true,
onResize:function(){
$('#pp').panel('resize');
}
});
$('#pp').portal('add', {
panel:p,
columnIndex:0
});
$.extend(p.panel('options'), {
onOpen: function(){
var prevPanel = $(this).parent().prev().children('.panel-body');
prevPanel.panel('close');
},
onClose: function(){
var panels = $('#pp').portal('getPanels', 0);
if ($(panels[panels.length-1])[0] == this){
var prevPanel = $(this).parent().prev();
prevPanel.children('.panel-body').panel('open');
$(this).panel('destroy');
}
},
});
p.panel('open');
$('#pp').portal('resize');
}
}
function findPanel(pp,title){
var panels = $(pp).portal('getPanels', 0);
for(var i=0; i<panels.length; i++){
var panel = panels[i];
if (panel.panel('options').title == title){
return panel;
}
}
return null;
}
Thanks for the help. Please fix the problem.