<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. */
  • Content:
    .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;
    }
    
  • URL: /components/raw/accordion/accordion.css
  • Filesystem Path: src/components/01-atoms/01-accordion/accordion.css
  • Size: 1.6 KB

Accordion component

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