<details open>
<summary>Close Level 0</summary>
<button popovertarget="lvl1">Open/Close Level 1</button>
<button popovertarget="lvl2">Open/Close Level 2</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>
</div>
div {
position: absolute;
inset: unset;
}
#lvl1 {
top: 10vh;
left: 10vw;
}
#lvl2 {
top: 20vh;
left: 20vw;
}
#lvl3 {
top: 30vh;
left: 30vw;
}
#lvl4 {
top: 40vh;
left: 40vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.