JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div class="yui3-skin-sam">
<div id="test1"><h1>This is only a test
    <a href="#" id="panel2">Link to panel 2</a>
    </h1></div>
<div id="test2"><h1>This is only a test2</h1></div>
</div>

CSS

#test1, #test2 {
    visibility: hidden;
}
.yui3-panel-focused #test1 {
    visibility: visible;
}
.yui3-panel-focused #test2 {
    visibility: visible;
}

JavaScript

YUI().use("node","panel",function(Y) {
    var myPanel1 = new Y.Panel({
        srcNode: "#test1",
        width: 300,
        height: 300,
        modal: true,
        centered: true,
        visible: true,
        render: true
    });
    
    myPanel1.show()
    
    var myPanel2 = new Y.Panel({
        srcNode: "#test2",
        width: 300,
        height: 300,
        modal: true,
        centered: true,
        visible: false,
        render: true,
        hideOn: []
    });
    Y.one("#panel2").on("click", function(e) {
        var panel1HideOn = myPanel1.get("hideOn");
        myPanel1.set("hideOn",[]);
        myPanel2.show();
        myPanel2.on("visibleChange", function(e) {
            myPanel1.set("hideOn",panel1HideOn);
        });
    });
})