Accordion Block - Alternating Tab Colors

Follow these steps to add this free plugin to your Squarespace website.

• 1. Plugin Info

  Add alternating colors to the accordion block tabs.

  • Works with Squarespace 7.0 and 7.1

  • Uses Custom CSS

• 2. Custom CSS

  Add this code to Custom CSS.

  // Accordion Block - Alternating Tab Colors - Ghost //

  .sqs-block-accordion .accordion-item:nth-child(odd){
  background: #fafafa;
  margin-bottom: 10px;
  }

  .sqs-block-accordion .accordion-item:nth-child(even){
  background: #eee;
  margin-bottom: 10px;
  }

• 3. Customizable Options

  These options are available in CSS.

  • Tab Color (Odd Tabs - 1st, 3rd, 5th, Etc)

  • Margin Spacing (Odd Tabs)

  • Tab Color (Even Tabs - 2nd, 4th, 6th, Etc)

  • Margin Spacing (Even Tabs)

• 4. Plugin Notes

  Plugin notes.

  • Disabling dividers in accordion block settings is recommended.

  • Tab padding, alignment and other styles can be changed in settings.