mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-06 17:48:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Implement the exclusive <details> accordion

Browse source 
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.
This commit is contained in:
Timothy Flynn 2025-01-15 14:39:05 -05:00 • committed by Andreas Kling
commit 59a4203cf0
Notes: github-actions[bot] 2025-01-17 09:23:27 +00:00
4 changed files with 155 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

56
Tests/LibWeb/Text/input/HTML/details-name.html Normal file
View file

@ -0,0 +1,56 @@
<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>