Expand Collapse

Overview

A content area which can be collapsed and expanded.

import React, { Component, PropTypes } from 'react';
import { ExpandCollapse } from 'telus-thorium-enriched';

const RegularExpandCollapseEx = () => {
    return (
      <ExpandCollapse.Group disabledKeys={["panel-3"]}>
        <ExpandCollapse.Panel header="Panel #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet at lacus vel fringilla.">
          Panel #1 Body
        </ExpandCollapse.Panel>
        <ExpandCollapse.Panel header="Panel #2">
          Panel #2 Body
        </ExpandCollapse.Panel>
        <ExpandCollapse.Panel header="Panel #3 is disabled" panelKey="panel-3">
          Panel #3 Body
        </ExpandCollapse.Panel>
      </ExpandCollapse.Group>
    );
}

export default RegularExpandCollapseEx;

We can control the Expand/Collapse component state.

...
    this.state = {
      activeKeys: []
    };
    this.togglePanel = this.togglePanel.bind(this);
  }

  togglePanel(panelKey) {
      if (this.state.activeKeys.indexOf(panelKey) > -1) {
          this.setState({
              activeKeys: this.state.activeKeys.filter(k => k !== panelKey)
          });
      } else {
          this.setState({
              activeKeys: this.state.activeKeys.concat([panelKey])
          });
      }
  }

  render() {
      return (
      <div>
        <button class="button button--secondary button--link" onClick={(e)=>this.togglePanel(e, 'panel-1')}>Toggle panel #1</button>
        <button class="button button--secondary button--link" onClick={(e)=>this.togglePanel(e, 'panel-2')}>Toggle panel #2</button>
        <ExpandCollapse.Group activeKeys={this.state.activeKeys}>
            <ExpandCollapse.Panel header="Panel #1" panelKey="panel-1">
            Panel #1 Body
            </ExpandCollapse.Panel>
            <ExpandCollapse.Panel header="Panel #2" panelKey="panel-2">
            Panel #2 Body
            </ExpandCollapse.Panel>
        </ExpandCollapse.Group>
      </div>  
    );
  }

Accordion

Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.

import React, { Component, PropTypes } from 'react';
import { ExpandCollapse } from 'telus-thorium-enriched';

const AccordionExpandCollapseEx = () => {
    return (
      <ExpandCollapse.Group accordion>
        <ExpandCollapse.Panel header="Panel #1">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia fermentum nisl, id lobortis nunc porta sed. Vestibulum quis tortor non nisl vulputate varius. Vivamus euismod congue mi, quis ultricies dolor viverra at.</p>
        </ExpandCollapse.Panel>
        <ExpandCollapse.Panel header="Panel #2">
          <p>Ut fermentum, turpis vel tincidunt volutpat, diam est vehicula leo, sed convallis dolor ante aliquet nisi. Nunc nisi erat, pulvinar quis lectus eget, tristique suscipit lectus. Maecenas non erat semper, tristique odio euismod, pulvinar metus.</p>
        </ExpandCollapse.Panel>
      </ExpandCollapse.Group>
    );
}

export default AccordionExpandCollapseEx;

API

Group

Panel