AccordionSection

AccordionSection component.

Default

<AccordionSection />

Exemples

<div
  style={{
    border: '1px solid'
  }}
>
  <AccordionSection title={'Title section 1'}>
    <div>
      <div>Content 1 </div>
      <div>Content 2</div>
    </div>
  </AccordionSection>
  <AccordionSection title={'Title section 2'}>
    <div>
      <div>Content 2 </div>
      <div>Content 2</div>
    </div>
  </AccordionSection>
</div>

Title section 1

Content 1

Content 2

Title section 2

Content 2

Content 2

Not expanded by default

isExpanded=false

<div
  style={{
    width: '800px'
  }}
>
  <AccordionSection
    title={'Title section 1 not expanded default'}
    isExpanded={false}
  >
    <div
      variant="body1"
      style={{ height: '50px', width: '150px', border: '2px solid green' }}
    >
      <div>content </div>
    </div>
  </AccordionSection>
</div>

Title section 1 not expanded default

content

isDisabled not isExpanded

isDisabled

<div
  style={{
    width: '600px'
  }}
>
  <AccordionSection title={'Title section 1'} isDisabled isExpanded={false}>
    <div
      variant="body1"
      style={{ height: '50px', width: '150px', border: '2px solid green' }}
    >
      <div>Disabled </div>
    </div>
  </AccordionSection>
</div>

Title section 1

Disabled

isDisabled expanded

isDisabled

<div
  style={{
    width: '600px'
  }}
>
  <AccordionSection title={'Title section 1'} isDisabled>
    <div
      variant="body1"
      style={{ height: '50px', width: '150px', border: '2px solid green' }}
    >
      <div>Disabled </div>
    </div>
  </AccordionSection>
</div>

Title section 1

Disabled

onToggle

onToggle

<div
  style={{
    width: '600px'
  }}
>
  <AccordionSection
    title={'Title section 1 onToggle'}
    onToggle={(collapsed) => console.log('onToggle', collapsed)}
  >
    <div
      variant="body1"
      style={{ height: '50px', width: '150px', border: '2px solid green' }}
    >
      <div>onToggle </div>
    </div>
  </AccordionSection>
</div>

Title section 1 onToggle

onToggle

extraTitle

extraTitle

<div
  style={{
    width: '600px'
  }}
>
  <AccordionSection
    title={'Title section 1 onToggle'}
    extraTitle={
      <div style={{ flex: 1, background: 'red' }}>
        extraaaa titleextraaaaextraaaaextraaaa extraaaaextraaaaextraaaa
        extraaaaextraaaa
      </div>
    }
  >
    <div
      variant="body1"
      style={{ height: '50px', width: '150px', border: '2px solid green' }}
    >
      <div>content </div>
    </div>
  </AccordionSection>
</div>

Title section 1 onToggle

extraaaa title extraaaa title extraaaa title extraaaa title extraaaa title extraaaa titleextraaaa title extraaaa title

content

Config prop

Name	Type	Required	Default	Description
isExpanded	boolean	No	true	Expanded accordion
onToggle	function	No	()=>	Handle on change accodion
isDisabled	boolean	No	false	Disabled accordion
extraTitle	ReactNode	No	false	Extra title