Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo metus pellentesque quis. Suspendisse
lobortis eros elit, nec consequat sem posuere et. Aenean varius
facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit.
Donec accumsan placerat massa quis egestas. Praesent vitae maximus
nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus
in metus quis eros gravida finibus in sit amet elit. Maecenas eu
sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at
augue. Etiam eu faucibus sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo metus pellentesque quis. Suspendisse
lobortis eros elit, nec consequat sem posuere et. Aenean varius
facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit.
Donec accumsan placerat massa quis egestas. Praesent vitae maximus
nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus
in metus quis eros gravida finibus in sit amet elit. Maecenas eu
sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at
augue. Etiam eu faucibus sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo metus pellentesque quis. Suspendisse
lobortis eros elit, nec consequat sem posuere et. Aenean varius
facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit.
Donec accumsan placerat massa quis egestas. Praesent vitae maximus
nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus
in metus quis eros gravida finibus in sit amet elit. Maecenas eu
sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at
augue. Etiam eu faucibus sem.
code:
<main>
<ul>
<li>
<input type="checkbox" id="item-1" />
<label for="item-1">item 1</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo ... eu faucibus sem.
</p>
</div>
</li>
<li>
<input type="checkbox" id="item-2" />
<label for="item-2">item 2</label>
<div class="content">
<p>Lorem ipsum dolor sit amet,...Etiam eu faucibus sem.
</p>
</div>
</li>
<li>
<input type="checkbox" id="item-3" />
<label for="item-3">item 3</label>
<div class="content">
<p>Lorem ipsum dolor sit amet,... Etiam eu faucibus sem.
</p>
</div>
</li>
</ul>
</main>
<style>
main {padding: 5vw;}
ul {margin: 0;padding: 0;}
li {list-style: none; margin-bottom: 1vw;}
[type="checkbox"] {display: none;}
[type="checkbox"] + label {display: block; width: 100%; height: 3vw; text-align: center; background-color: var(--grey); transition: background-color 300ms; cursor: pointer;}
[type="checkbox"]:checked + label {background-color: var(--green);}
.content {height: 0; overflow: hidden; opacity: 0; transition: opacity 1s;}
.content > * {margin: 2vw;}
[type="checkbox"]:checked ~ .content {height: auto; opacity: 1;}
</style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo metus pellentesque quis. Suspendisse
lobortis eros elit, nec consequat sem posuere et. Aenean varius
facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit.
Donec accumsan placerat massa quis egestas. Praesent vitae maximus
nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus
in metus quis eros gravida finibus in sit amet elit. Maecenas eu
sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at
augue. Etiam eu faucibus sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo metus pellentesque quis. Suspendisse
lobortis eros elit, nec consequat sem posuere et. Aenean varius
facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit.
Donec accumsan placerat massa quis egestas. Praesent vitae maximus
nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus
in metus quis eros gravida finibus in sit amet elit. Maecenas eu
sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at
augue. Etiam eu faucibus sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo metus pellentesque quis. Suspendisse
lobortis eros elit, nec consequat sem posuere et. Aenean varius
facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit.
Donec accumsan placerat massa quis egestas. Praesent vitae maximus
nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus
in metus quis eros gravida finibus in sit amet elit. Maecenas eu
sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at
augue. Etiam eu faucibus sem.
code:
<div class="spec">
<ul>
<li>
<input type="radio" id="item-4" name="accordion" />
<label for="item-4">accordion 1</label>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.. . bibendum id at
augue. Etiam eu faucibus sem.
</p>
</div>
</li>
<li>
<input type="radio" id="item-5" name="accordion" />
<label for="item-5">accordion 2</label>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...turpis vestibulum
bibendum id ataugue. Etiam eu faucibus sem.
</p>
</div>
</li>
<li>
<input type="radio" id="item-6" name="accordion" />
<label for="item-6">accordion 3</label>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... vestibulum bibendum
id at
augue. Etiam eu faucibus sem.
</p>
</div>
</li>
</ul>
</div>
<style>
[type="radio"] {display: none;}
[type="radio"] + label { display: block; width: 100%; height: 3vw; background-color: var(--grey);
padding: 0.2vw; text-align: center; transition: background-color 300ms; cursor: pointer;}
[type="radio"]:checked + label {background-color: var(--green);}
[type="radio"]:checked ~ .content {height: auto; opacity: 1;}
</style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo metus pellentesque quis. Suspendisse
lobortis eros elit, nec consequat sem posuere et. Aenean varius
facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit.
Donec accumsan placerat massa quis egestas. Praesent vitae maximus
nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus
in metus quis eros gravida finibus in sit amet elit. Maecenas eu
sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at
augue. Etiam eu faucibus sem.
accordion 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo metus pellentesque quis. Suspendisse
lobortis eros elit, nec consequat sem posuere et. Aenean varius
facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit.
Donec accumsan placerat massa quis egestas. Praesent vitae maximus
nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus
in metus quis eros gravida finibus in sit amet elit. Maecenas eu
sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at
augue. Etiam eu faucibus sem.
accordion 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
mattis justo ex, nec commodo metus pellentesque quis. Suspendisse
lobortis eros elit, nec consequat sem posuere et. Aenean varius
facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit.
Donec accumsan placerat massa quis egestas. Praesent vitae maximus
nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus
in metus quis eros gravida finibus in sit amet elit. Maecenas eu
sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at
augue. Etiam eu faucibus sem.
code:
<div class="spec">
<ul>
<li>
<div class="heading" tabindex="1">accordion 1</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.... vestibulum bibendum
id at augue. Etiam eu faucibus sem.
</p>
</div>
</li>
<li>
<div class="heading" tabindex="2">accordion 2</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... bibendum id at
augue. Etiam eu faucibus sem.
</p>
</div>
</li>
<li>
<div class="heading" tabindex="3">accordion 3</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit..... bibendum id at
augue. Etiam eu faucibus sem.
</p>
</div>
</li>
</ul>
</div>
<style>
.heading { display: block; width: 100%; height: 3vw; background-color: var(--grey); padding: 0.2vw;
text-align: center; transition: background-color 300ms; cursor: pointer;}
.heading:focus {background-color: var(--green);}
.heading:focus + .content {height: auto; opacity: 1;}
</style>
Click to expand this section with a sliding effect
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.
Click to expand this section with a sliding effect
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.
Click to expand this section with a sliding effect
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.
code:
<div class="spec">
<details class="js-1">
<summary class="js-2">Click to expand this section with a sliding effect</summary>
<div class="content_a">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae!
At animi modi dignissimos corrupti placeat voluptatum!</p>
<img src="../images/1.jpg" width="50%" alt="Shanghai">
<p>Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio
placeat praesentium non sint repellendus consequuntur? Nihil, soluta.</p>
</div>
</details>
<details class="js-1">
<summary class="js-2">Click to expand this section with a sliding effect</summary>
<div class="content_a">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae!
At animi modi dignissimos corrupti placeat voluptatum!</p>
<img src="../images/2.jpg" width="50%" alt="Shanghai">
<p>Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit
optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.</p>
</div>
</details>
<details class="js-1">
<summary class="js-2">Click to expand this section with a sliding effect</summary>
<div class="content_a">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae!
At animi modi dignissimos corrupti placeat voluptatum!</p>
<img src="../images/3.jpg" width="50%" alt="Shanghai">
<p>Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit
optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.</p>
</div>
</details>
</div>
<style>
.js-2 {background: burlywood; padding: 5px; border: 2px solid transparent; outline: none;}
.js-2:focus {border-color: black;}
.js-1 {max-width: 40vw; box-sizing: border-box; margin-top: 0.5vw; margin-left: 2VW;}
.content_a {border-top: none; padding: 1vw; border: 0.2vw solid green; border-top: none;}
.content_a p {margin: 0; padding-bottom: 1vw;}
.content_a p:last-child { padding: 0;}
.content_a img{max-width: 100%;}
</style>
<script>
class Accordion {
constructor(ele) {
// Store the <details> element
this.ele = ele;
this.h3 = ele.querySelector('.js-2');
this.content = ele.querySelector('.content_a');
this.animation = null;
this.isClosing = false;
this.isExpanding = false;
this.h3.addEventListener('click', (el) => this.onClick(el));
}
onClick(el) {
el.preventDefault();
this.ele.style.overflow = 'hidden';
if (this.isClosing || !this.ele.open) {
this.open();
} else if (this.isExpanding || this.ele.open) {
this.shrink();
}
}
shrink() {
this.isClosing = true;
const startHeight = `${this.ele.offsetHeight}px`;
const endHeight = `${this.h3.offsetHeight}px`;
if (this.animation) {
this.animation.cancel();
}
this.animation = this.ele.animate({
height: [startHeight, endHeight]
}, {
duration: 400,
easing: 'ease-out'
});
this.animation.onfinish = () => this.onAnimationFinish(false);
this.animation.oncancel = () => this.isClosing = false;
}
open() {
this.ele.style.height = `${this.ele.offsetHeight}px`;
this.ele.open = true;
window.requestAnimationFrame(() => this.expand());
}
expand() {
this.isExpanding = true;
const startHeight = `${this.ele.offsetHeight}px`;
const endHeight = `${this.h3.offsetHeight + this.content.offsetHeight}px`;
if (this.animation) {
this.animation.cancel();
}
this.animation = this.ele.animate({
height: [startHeight, endHeight]
}, {
duration: 400,
easing: 'ease-out'
});
this.animation.onfinish = () => this.onAnimationFinish(true);
this.animation.oncancel = () => this.isExpanding = false;
}
onAnimationFinish(open) {
this.ele.open = open;
this.animation = null;
this.isClosing = false;
this.isExpanding = false;
this.ele.style.height = this.ele.style.overflow = '';
}
}
document.querySelectorAll('details').forEach((ele) => {
new Accordion(ele);
});
</script>
