It was able to be realized with the following code.
require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
//
$('#<id of panel1>').closest(".dashboard-cell").css('width', '97%');
$('#<id of panel2>').closest(".dashboard-cell").css('width', '3%');
document.getElementById("<id of contents of panel2(table,chart...)>").style.display="none";
var cnt = 0;
$('#<id of button>').click(function onoff() {
if(cnt == 0){
cnt = 1;
$('#<id of panel1>').closest(".dashboard-cell").css('width', '70%');
$('#<id of panel2>').closest(".dashboard-cell").css('width', '30%');
document.getElementById("<id of contents of panel2(table,chart...)>").style.display="block";
} else {
cnt = 0;
$('#<id of panel1>').closest(".dashboard-cell").css('width', '97%');
$('#<id of panel2>').closest(".dashboard-cell").css('width', '3%');
document.getElementById("<id of contents of panel2(table,chart...)>").style.display="none";
}
});
$(window).trigger('resize');
});
By clicking the button,
Since it is possible to change the width of panel1 and panel2 and display/non-display of contents of panel2, so, panel2 looks like a panel that can switch between folding/unfolding.
Details of processing are as follows.
In the case of cnt = 0, clicking, the width of the panel 1 is narrowed, the width of the panel 2 is widened, and the content in the panel 2 is displayed.
In the case of cnt = 1, when clicking, widens the width of the panel 1, narrows the width of the panel 2, and hides the contents in the panel 2.
... View more