<div class="demo">
<div class="accordion--item">
<h3 class="accordion--title">First Amendment</h3>
<div class="accordion--content">
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof;
or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.</p>
</div>
</div>
<div class="accordion--item">
<h3 class="accordion--title">Second Amendment</h3>
<div class="accordion--content">
<p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and
bear Arms, shall not be infringed.</p>
</div>
</div>
<div class="accordion--item">
<h3 class="accordion--title">Third Amendment</h3>
<div class="accordion--content">
<p>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of
war, but in a manner to be prescribed by law.</p>
</div>
</div>
</div>
<div class="accordion--item">
<h3 class="accordion--title">Fourth Amendment</h3>
<div class="accordion--content">
<p>The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches
and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or
affirmation, and particularly describing the place to be searched, and the persons or things to be seized.</p>
</div>
</div>
<div class="accordion--item">
<h3 class="accordion--title">Fifth Amendment</h3>
<div class="accordion--content">
<p>No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or
indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual
service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in
jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be
deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public
use, without just compensation.</p>
</div>
</div>
</div>
<script src="/js/accordion.js"></script>
<div class="demo">
<div class="accordion--item">
<h3 class="accordion--title">First Amendment</h3>
<div class="accordion--content">
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof;
or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.</p>
</div>
</div>
<div class="accordion--item">
<h3 class="accordion--title">Second Amendment</h3>
<div class="accordion--content">
<p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and
bear Arms, shall not be infringed.</p>
</div>
</div>
<div class="accordion--item">
<h3 class="accordion--title">Third Amendment</h3>
<div class="accordion--content">
<p>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of
war, but in a manner to be prescribed by law.</p>
</div>
</div>
</div>
<div class="accordion--item">
<h3 class="accordion--title">Fourth Amendment</h3>
<div class="accordion--content">
<p>The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches
and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or
affirmation, and particularly describing the place to be searched, and the persons or things to be seized.</p>
</div>
</div>
<div class="accordion--item">
<h3 class="accordion--title">Fifth Amendment</h3>
<div class="accordion--content">
<p>No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or
indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual
service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in
jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be
deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public
use, without just compensation.</p>
</div>
</div>
</div>
<script src="/js/accordion.js"></script>
/* No context defined. */
.container {
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
summary {
background-color: var(--oklch-color-black);
color: var(--oklch-color-white);
padding: 1.2rem;
margin-block-end: 1.2rem;
border-radius: 0.5rem;
cursor: pointer;
font-size: 1.5em;
font-weight: 600;
}
.accordion--item {
margin-block-end: 1.5em;
}
.accordion--item:first-child {
margin-block-start: 2em;
}
.accordion--item:last-child {
margin-block-end: 2em;
}
.accordion--title {
cursor: pointer;
user-select: none;
background-color: var(--oklch-color-stone);
color: var(--oklch-color-white);
background-image: url(https://assets.codepen.io/32795/remove.svg), linear-gradient(transparent, transparent);
background-repeat: no-repeat;
background-position: right 1.25rem center;
background-size: 1.5rem;
border-radius: 15px;
font-weight: 700;
padding: 1rem 3.5rem 1rem 1.25rem;
}
.accordion--content {
margin-block-start: 1em;
margin-inline: 2em;
}
.accordion--title + .accordion--content {
display: none;
}
.accordion--title.is-open + .accordion--content {
display: block;
}
.accordion--content-bordered {
margin-inline-start: 0;
}
.accordion--title + .accordion--content-bordered {
display: none;
}
.accordion--title.is-open + .accordion--content-bordered {
display: block;
}
.accordion--content-bordered {
border-bottom: 0.5rem solid lch(48.64% 16.94 244.34);
border-left: 0.5rem solid lch(48.64% 16.94 244.34);
border-right: 0.5rem solid lch(48.64% 16.94 244.34);
padding: 1em;
}
Still working on a multiselect variant that will allow you to keep multiple tabs open.
Needs to consider accessibility.
code adapted from How to build an accordion with JavaScript