Set width: full 320 768 1024 1920 custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details and Summary with animation</title>
<meta name="description" content="A details and summary element with custom arrow/marker and animation.">
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.wrap {
max-width: 950px;
}
h2 {
margin: 2em 0 1em 0;
font-size: 1.2em;
}
h2:first-child {
margin-top: 0;
}
details {
margin-bottom: 1em;
border: 1px solid #ccc;
}
details summary {
cursor: pointer;
padding: 1em;
background: #eee;
user-select: none;
}
details summary:hover {
background: #e4e4e4;
}
details > div {
padding: 1em;
font-size: .9em;
color: #333;
line-height: 130%;
}
details[open] summary {
background: #ccc;
}
details.custom > summary {
list-style: none;
}
details.custom > summary::-webkit-details-marker {
display: none;
}
details.custom > summary::before {
content: "🡆";
position: relative;
margin-right: .5em;
display: inline-block;
transform: rotate(0deg);
transition: .25s ease-out;
}
details.custom[open] > summary::before {
transform: rotate(90deg);
transition: .25s ease-out;
}
</style>
</head>
<body>
<div class="wrap">
<h2>Multiple can be open at a time:</h2>
<details>
<summary>First section</summary>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore dignissimos consequuntur temporibus numquam delectus illo ipsum animi omnis, molestiae possimus totam a. Consectetur sint cupiditate dicta a. Saepe, recusandae minima?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate ipsam suscipit, sit magnam eius eos doloremque reprehenderit illum dicta velit. Rem omnis voluptate reprehenderit consequuntur necessitatibus eum in? Necessitatibus!
</div>
</details>
<details>
<summary>Second section</summary>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore dignissimos consequuntur temporibus numquam delectus illo ipsum animi omnis, molestiae possimus totam a. Consectetur sint cupiditate dicta a. Saepe, recusandae minima?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate ipsam suscipit, sit magnam eius eos doloremque reprehenderit illum dicta velit. Rem omnis voluptate reprehenderit consequuntur necessitatibus eum in? Necessitatibus!
</div>
</details>
<details>
<summary>Another section</summary>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore dignissimos consequuntur temporibus numquam delectus illo ipsum animi omnis, molestiae possimus totam a. Consectetur sint cupiditate dicta a. Saepe, recusandae minima?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate ipsam suscipit, sit magnam eius eos doloremque reprehenderit illum dicta velit. Rem omnis voluptate reprehenderit consequuntur necessitatibus eum in? Necessitatibus!
</div>
</details>
<h2>Only one can be open at a time:</h2>
<details name="details1">
<summary>Details 1</summary>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore dignissimos consequuntur temporibus numquam delectus illo ipsum animi omnis, molestiae possimus totam a. Consectetur sint cupiditate dicta a. Saepe, recusandae minima?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate ipsam suscipit, sit magnam eius eos doloremque reprehenderit illum dicta velit. Rem omnis voluptate reprehenderit consequuntur necessitatibus eum in? Necessitatibus!
</div>
</details>
<details name="details1">
<summary>Details 2</summary>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore dignissimos consequuntur temporibus numquam delectus illo ipsum animi omnis, molestiae possimus totam a. Consectetur sint cupiditate dicta a. Saepe, recusandae minima?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate ipsam suscipit, sit magnam eius eos doloremque reprehenderit illum dicta velit. Rem omnis voluptate reprehenderit consequuntur necessitatibus eum in? Necessitatibus!
</div>
</details>
<h2>Custom arrow/marker with animation:</h2>
<details class="custom" name="cust1">
<summary>Custom 1</summary>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore dignissimos consequuntur temporibus numquam delectus illo ipsum animi omnis, molestiae possimus totam a. Consectetur sint cupiditate dicta a. Saepe, recusandae minima?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate ipsam suscipit, sit magnam eius eos doloremque reprehenderit illum dicta velit. Rem omnis voluptate reprehenderit consequuntur necessitatibus eum in? Necessitatibus!
</div>
</details>
<details class="custom" name="cust1">
<summary>Custom 2</summary>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore dignissimos consequuntur temporibus numquam delectus illo ipsum animi omnis, molestiae possimus totam a. Consectetur sint cupiditate dicta a. Saepe, recusandae minima?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate ipsam suscipit, sit magnam eius eos doloremque reprehenderit illum dicta velit. Rem omnis voluptate reprehenderit consequuntur necessitatibus eum in? Necessitatibus!
</div>
</details>
</div>
</body>
</html>