Collapse

Components

va-accordion

Accordion is a component which organizes content within collapsable items. Accordions can toggle through a number of text blocks with a single click.

      <va-accordion>
        <va-collapse>
          <span slot="header"> Expand This Block </span>
          <div slot="body">
            <div>
              Expand first content
            </div>
          </div>
        </va-collapse>
        <va-collapse withBackground>
          <span slot="header">Accordeon with background</span>
          <div slot="body">
            <div>
              Expand three content
            </div>
          </div>
        </va-collapse>
        <va-collapse customHeader>
          <span slot="header">
            <va-button>
              No-header collapse
            </va-button>
          </span>
          <div slot="body">
            <div>
              Expand three content
            </div>
          </div>
        </va-collapse>    
      </va-accordion>

va-collapse

Collapse is a component which provides possibility to toggle the visibility of content across your project.

        <va-collapse>
          <span slot="header"> Expand This Block </span>
          <div slot="body">
            <div>
              Expand first content
            </div>
          </div>
        </va-collapse>

Props

• defaultValue - Boolean (default: false) - set default value, which controls the opened/closed state of content
• withBackground - Boolean (default: false) - add background color to collapse content
• customHeader - Boolean (default: false) - add possibility to set your custom header (for example button)

Find DEMOs here!