Javascript Snippets

Pretty Simple Accordions

Altogether in one HTML Card on a post, some simple but pretty multi-colored Accordions...

Jen Wallace

• 2 min read
When will payments begin?

When we receive your agreement, we send you a letter or email confirming the original terms of your agreement. This includes your payment amount, balance due, and date your authorized payments begin. Payments will continue until the total balance is paid in full.

I forgot my username/password. How do I login?

To retrieve your username or password, visit this link. If you've forgotten your username, it will be sent to the email address associated with your account. If you’ve forgotten your password, a link will be emailed to the email address associated with your account that allows you to reset your password.

How do I upgrade, downgrade, or cancel a subscription?

We offer yearly and monthly plans, which you can read more about on our Pricing page. All our plans are recurring, and if you want to unsubscribe you should cancel your plan before your prepaid period ends (term end). You can cancel your subscription under the Account section on the Plan & billing page.

The CSS...

<style>
  details.accordion {
    --color-accent: #222;
    margin-bottom: 1em;
    border-radius: 5px;
    padding: 1.5em;
    position: relative;
    padding-left: 3.5em;
    border-left: 5px solid var(--color-accent);
    overflow: hidden;
    width: auto;
  }

  details.accordion::before {
    background-color: var(--color-accent);
    opacity: 0.1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  details.accordion summary {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  details.accordion summary::marker {
    display: none;
  }

  details.accordion summary::before {
    position: absolute;
    content: '+';
    left: 1.5rem;
    color: #000;
    font-weight: bold;
    cursor: pointer;
  }

  details.accordion[open] summary::before {
    transform: rotate(45deg);
  }

  details.accordion[open] summary {
    font-weight: 700;
  }
</style>

The HTML...

<details class="accordion">
  <summary>When will payments begin?</summary>
  <p>When we receive your agreement, we send you a letter or email confirming the original terms of your agreement. This includes your payment amount, balance due, and date your authorized payments begin. Payments will continue until the total balance is paid in full.</p>
</details>

<details class="accordion" style="--color-accent: royalblue;">
  <summary>I forgot my username/password. How do I login?</summary>
  <p>To retrieve your username or password, visit this link. If you've forgotten your username, it will be sent to the email address associated with your account. If you’ve forgotten your password, a link will be emailed to the email address associated with your account that allows you to reset your password.</p>
</details>

<details class="accordion" style="--color-accent: aquamarine;">
  <summary>How do I upgrade, downgrade, or cancel a subscription?</summary>
  <p>We offer yearly and monthly plans, which you can read more about on our Pricing page. All our plans are recurring, and if you want to unsubscribe you should cancel your plan before your prepaid period ends (term end). You can cancel your subscription under the Account section on the Plan & billing page.</p>
</details>