<details open>
<summary>Close Level 0</summary>
<button popovertarget="lvl1" popovertargetaction="show">Open Level 1</button>
<button popovertarget="lvl1" popovertargetaction="hide">Close Level 1 </button>
</details>
<div id="lvl1" popover="manual">
<h2>Level 1 Popup</h2>
<button popovertarget="lvl2">Open/Close Level 2</button>
</div>
<div id="lvl2" popover="manual">
<h2>Level 2 Popup</h2>
<button popovertarget="lvl3">Open/Close Level 3</button>
</div>
<div id="lvl3" popover="manual">
<h2>Level 3 Popup</h2>
<button popovertarget="lvl4">Open/Close Level 4</button>
</div>
<div id="lvl4" popover="manual">
<h2>Level 4 Popup</h2>
<button popovertarget="lvl1" popovertargetaction="hide">Close Level 1 </button>
</div>
details, div {
position: absolute;
inset: unset;
}
#lvl1 {
top: 15vh;
left: 10vw;
}
#lvl2 {
top: 35vh;
left: 30vw;
}
#lvl3 {
top: 55vh;
left: 50vw;
}
#lvl4 {
top: 75vh;
left: 70vw;
}
button:action {
background-color: red;
}
h2 {
margin-top: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.