mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-04 16:11:54 +00:00
59a4203cf0
This is a relatively new feature which allows naming <details> groups to ensure only one <details> element in that group is opened at a time.
56 lines
1.3 KiB
HTML
56 lines
1.3 KiB
HTML
<details id="details0" name="group1">
|
|
<summary>Summary 0</summary>
|
|
<span>Contents 0</span>
|
|
</details>
|
|
<details id="details1" name="group1">
|
|
<summary>Summary 1</summary>
|
|
<span>Contents 1</span>
|
|
</details>
|
|
<details id="details2" name="group1">
|
|
<summary>Summary 2</summary>
|
|
<span>Contents 2</span>
|
|
</details>
|
|
<details id="details3" name="group2">
|
|
<summary>Summary 3</summary>
|
|
<span>Contents 3</span>
|
|
</details>
|
|
<details id="details4">
|
|
<summary>Summary 4</summary>
|
|
<span>Contents 4</span>
|
|
</details>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
test(done => {
|
|
const elements = document.getElementsByTagName("details");
|
|
|
|
const logState = () => {
|
|
let result = "";
|
|
|
|
for (const element of elements) {
|
|
result += `${element.id}=${element.open ? "✓" : "✗"} `;
|
|
}
|
|
|
|
println(result.trimEnd());
|
|
};
|
|
|
|
logState();
|
|
|
|
elements[0].toggleAttribute("open");
|
|
logState();
|
|
|
|
elements[1].toggleAttribute("open");
|
|
logState();
|
|
|
|
elements[2].toggleAttribute("open");
|
|
logState();
|
|
|
|
elements[3].toggleAttribute("open");
|
|
logState();
|
|
|
|
elements[4].toggleAttribute("open");
|
|
logState();
|
|
|
|
elements[0].toggleAttribute("open");
|
|
logState();
|
|
});
|
|
</script>
|