Skip to content

Instantly share code, notes, and snippets.

@axjack

axjack/kaisou.html

Created November 21, 2021 14:49
Show Gist options
  • Save axjack/83dbb2e2f75fa477cc294b862ba23694 to your computer and use it in GitHub Desktop.
Save axjack/83dbb2e2f75fa477cc294b862ba23694 to your computer and use it in GitHub Desktop.
Download ZIP
階層構造
Raw
kaisou.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
details details{
margin-left: 20px;
}
dl{
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
dd{
width: 50%;
margin-left: 10px;
margin-top: 1px;
margin-bottom: 2px;
border-top: solid 1px;
border-bottom: solid 1px;
border-left: solid 10px darkturquoise;
transition: background-color .1s;
}
dd:hover{
background-color: gold;
}
</style>
<body>
<div>
<h1>aaaaa</h1>
</div>
<div>
<button id="btn1">すべて開く</button>
<button id="btn2">すべて閉じる</button>
</div>
<hr>
<div>
<details>
<summary>cat1</summary>
<details>
<summary>cat11</summary>
<dl>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
</dl>
</details>
</details>
<details>
<summary>cat2</summary>
<dl>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
</dl>
<details>
<summary>cat21</summary>
<dl>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
</dl>
</details>
<details>
<summary>cat2</summary>
<details>
<summary>cat21</summary>
<dl>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
</dl>
</details>
</details>
</details>
<details>
<summary>cat3</summary>
<details>
<summary>cat31</summary>
<dl>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">ABCDEFGHIJ12345678</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
<label><dd><input type="checkbox">aaaa</dd></label>
</dl>
</details>
</details>
</div>
</body>
<script>
let d = document;
let e2 = d.querySelector("#btn1");
e2.addEventListener("click",
_ => {let e1 = d.querySelectorAll("details");e1.forEach( x => x.open = "open" );});
let e3 = d.querySelector("#btn2");
e3.addEventListener("click",
_ => {let e1 = d.querySelectorAll("details");e1.forEach( x => x.open = "" );});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment