Accordion

Accordion comprises of vertically stacked items/sections that can be expanded or collapsed to reveal the related content. There can be more than one expanded section at the same time. The sections can be expanded or collapsed by clicking on their title.

Import Syntax

xxxxxxxxxx
 
import Accordion, {
  AccordionSection,
  AccordionTitle,
  AccordionContent
} from 'calcite-react/Accordion';

Basic Usage

 
<Accordion activeSectionIndexes={[0]}>
  <AccordionSection>
    <AccordionTitle>Accordion Title 1</AccordionTitle>
    <AccordionContent>
      <CalciteP>Accordion Content 1</CalciteP>
    </AccordionContent>
  </AccordionSection>
  <AccordionSection>
    <AccordionTitle>Accordion Title 2</AccordionTitle>
    <AccordionContent>
      <CalciteP>Accordion Content 2</CalciteP>
    </AccordionContent>
  </AccordionSection>
  <AccordionSection>
    <AccordionTitle>Accordion Title 3</AccordionTitle>
    <AccordionContent>
      <CalciteP>Accordion Content 3</CalciteP>
    </AccordionContent>
  </AccordionSection>
</Accordion>

Controlled Usage

 
() => {
  class AccordionExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        activeSectionIndexes: [0],
      }
      this.onAccordionChange = this.onAccordionChange.bind(this)
    }
​
    onAccordionChange(evt, index) {
      this.state.activeSectionIndexes.includes(index)
        ? this.setState({
            activeSectionIndexes: this.state.activeSectionIndexes.filter(
              item => index !== item,
            ),
          })
        : this.setState({
            activeSectionIndexes: [...this.state.activeSectionIndexes, index],
          })
    }
​
    render() {
      return (
        <Accordion
          onAccordionChange={this.onAccordionChange}
          activeSectionIndexes={this.state.activeSectionIndexes}
        >
          <AccordionSection>
            <AccordionTitle>Accordion Title 1</AccordionTitle>
            <AccordionContent>
              <CalciteP>Accordion Content 1</CalciteP>
            </AccordionContent>
          </AccordionSection>
          <AccordionSection>
            <AccordionTitle>Accordion Title 2</AccordionTitle>
            <AccordionContent>
              <CalciteP>Accordion Content 2</CalciteP>
            </AccordionContent>
          </AccordionSection>
          <AccordionSection>
            <AccordionTitle>Accordion Title 3</AccordionTitle>
            <AccordionContent>
              <CalciteP>Accordion Content 3</CalciteP>
            </AccordionContent>
          </AccordionSection>
        </Accordion>
      )
    }
  }
​
  return <AccordionExample />
}

Icon Position

 
() => {
  class AccordionExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        activeSectionIndexes: [0],
      }
      this.onAccordionChange = this.onAccordionChange.bind(this)
    }
​
    onAccordionChange(evt, index) {
      this.state.activeSectionIndexes.includes(index)
        ? this.setState({
            activeSectionIndexes: this.state.activeSectionIndexes.filter(
              item => index !== item,
            ),
          })
        : this.setState({
            activeSectionIndexes: [...this.state.activeSectionIndexes, index],
          })
    }
​
    render() {
      return (
        <Accordion
          iconPosition="start"
          onAccordionChange={this.onAccordionChange}
          activeSectionIndexes={this.state.activeSectionIndexes}
        >
          <AccordionSection>
            <AccordionTitle>Accordion Title 1</AccordionTitle>
            <AccordionContent>
              <CalciteP>Accordion Content 1</CalciteP>
            </AccordionContent>
          </AccordionSection>
          <AccordionSection>
            <AccordionTitle>Accordion Title 2</AccordionTitle>
            <AccordionContent>
              <CalciteP>Accordion Content 2</CalciteP>
            </AccordionContent>
          </AccordionSection>
          <AccordionSection>
            <AccordionTitle>Accordion Title 3</AccordionTitle>
            <AccordionContent>
              <CalciteP>Accordion Content 3</CalciteP>
            </AccordionContent>
          </AccordionSection>
        </Accordion>
      )
    }
  }
​
  return <AccordionExample />
}

Props

Accordion `default`

Property	Type	Required	Default	Description
activeSectionIndexes	Array	false	[]	Indexes of the sections that are supposed to be active.
iconPosition	Enum	false	end	Where the chevron is positioned in relation to the title
children	Node	false	-	Used to render AccordionSections inside the Accordion.

AccordionSection

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component; should be AccordionTitle and AccordionContent.

AccordionTitle

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component

AccordionContent

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component; can be a node or string.

Calcite React