Accordion - CSS API Reference

All Common CSS variables:

Specific CSS variables for Accordion styling:

• --smart-accordion-animation-duration: Accordion's animation duration
• --smart-accordion-default-width: Accordion's default width
• --smart-accordion-default-height: Accordion's default height
• --smart-accordion-expanded-content-height: The height of the expanded items content part. Calculated dynamically. Used in "singleFitHeight" mode.
• --smart-accordion-expanded-content-local-height: The height of an expanded item content part. Calculated dynamically for each item. Used in all modes except "singleFitHeight".
• --smart-accordion-item-header-height: Element's header height. Used in several calcilations related to items height.
• --smart-accordion-item-expanded-offset: An offset below each expanded accordion item.

The following CSS selectors can be used to style an Accordion:

• smart-accordion - the element itself. Can be used to set width and height for the whole element.
  • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
    • .smart-accordion-item - smartAccordionItem custom element. All of the accordion's content is represented as smart-accordion-item blocks.
      • .smart-container - the container that holds all of the internals of the accordion item. Shoudn't be used for styling.
        • .smart-accordion-item-header - used as an item's header container.
          • .smart-arrow - an HTML Span element used as an item's arrow.
          • .smart-label - an HTML Span element used as an item's label.
        • .smart-accordion-item-content - used as an item's content part.
          • .smart-content-container - used as an item's content container part.

Demo

<style>
        #accordion{
                --smart-accordion-item-expanded-offset: 20px;
                --smart-accordion-animation-duration: 350ms;
        }
</style>