li {
display: inline-block;
}
.displayNone{display:none}
.mytext {padding-block: 2;
background-color:#d5f4e6;anchorX: 'middle';}
</li>
</style>
<li>
<div id="BOARDID0" class="jxgbox" style="width:400px; height:400px">
</div></li>
<li>
<div id="BOARDID1" class="displayNone jxgbox" style="width:400px; height:400px">
</div>
</li>
<jsxgraph class=" displayNone jxgbox" box="BOARDID0,BOARDID1" numberOfBoards="2">
JXG.Options = JXG.merge(JXG.Options, {
arrow: { strokeWidth: 3, strokeColor: "darkblue", fixed: true }
});
var brd2 = JXG.JSXGraph.initBoard(BOARDID0, {showFullscreen: true,
boundingbox: [-5,5, 5, -5],
axis: true,
showNavigation: false,
keepaspectratio: true,
showCopyright: false
});
var chckbx = brd2.create('checkbox', [-1,-2, 'second board'],{size:14});
brd2.suspendUpdate();
brd2.unsuspendUpdate();
brd2.update();
var div1 = document.querySelector("#BOARDID1");
JXG.addEvent(chckbx.rendNodeCheckbox, 'change', function() {
if (this.Value()) {
div1.classList.remove('displayNone');
} else {
div1.classList.add('displayNone');
}
}, chckbx);
var brd1 = JXG.JSXGraph.initBoard(BOARDID1, {showFullscreen: true,
boundingbox: [-5,5, 5, -5],
axis: true,
showNavigation: false,
keepaspectratio: true,
showCopyright: false
});
brd2.addChild(brd1);
brd1.suspendUpdate();
brd1.unsuspendUpdate();
brd1.update();
</jsxgraph>