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>