Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

accordion

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
58
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
3 KB
An Accordion is a collection of vertically stacked sections with multiple content areas. Allows a user to toggle the display of a section of content.
1 contributor
Install accordion as a package?
Copied
npm i @bit/nexxtway.react-rainbow.accordion
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right
accordion base
import React from 'react';
import { Card, Accordion, AccordionSection, Input } from 'react-rainbow-components';

<div className="rainbow-m-around_xx-large">
    <Card>
        <Accordion id="accordion-1">
            <AccordionSection label="Rainbow Accordion">
                <p>
                    A rainbow is a meteorological phenomenon that is caused by reflection,
                    refraction and dispersion of light in water droplets resulting in a spectrum of
                    light appearing in the sky.
                </p>
                <Input label="Input Text" placeholder="Placeholder text" type="text" />
            </AccordionSection>
            <AccordionSection label="Rainbow Accordion">
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
            <AccordionSection label="Rainbow Accordion">
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
        </Accordion>
    </Card>
</div>
accordion with icons
import React from 'react';
import { Card, Accordion, AccordionSection } from 'react-rainbow-components';

// more details about how to use react-font-awesome
// visit https://github.com/FortAwesome/react-fontawesome
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faUsers, faCog } from '@fortawesome/free-solid-svg-icons';

<div className="rainbow-m-around_xx-large">
    <Card>
        <Accordion>
            <AccordionSection
                icon={<FontAwesomeIcon icon={faCog} className="rainbow-color_brand" />}
                label="General Settings"
            >
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
            <AccordionSection
                icon={<FontAwesomeIcon icon={faUsers} className="rainbow-color_brand" />}
                label="Users"
            >
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
            <AccordionSection
                icon={<FontAwesomeIcon icon={faUser} className="rainbow-color_brand" />}
                label="Personal data"
            >
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
        </Accordion>
    </Card>
</div>
accordion with multiple sections opened
import React from 'react';
import { Card, Accordion, AccordionSection } from 'react-rainbow-components';

class AccordionExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeNames: ['accordion-1', 'accordion-2'],
        };
        this.handleOnSelect = this.handleOnSelect.bind(this);
    }

    handleOnSelect(event, activeNames) {
        this.setState({ activeNames });
    }

    render() {
        const { activeNames } = this.state;

        return (
            <div className="rainbow-m-around_xx-large">
                <Card>
                    <Accordion
                        id="accordion-multiple-1"
                        multiple
                        activeSectionNames={activeNames}
                        onToggleSection={this.handleOnSelect}
                    >
                        <AccordionSection name="accordion-1" label="Rainbow Accordion">
                            A rainbow is a meteorological phenomenon that is caused by reflection,
                            refraction and dispersion of light in water droplets resulting in a
                            spectrum of light appearing in the sky.
                        </AccordionSection>

                        <AccordionSection name="accordion-2" label="Rainbow Accordion">
                            A rainbow is a meteorological phenomenon that is caused by reflection,
                            refraction and dispersion of light in water droplets resulting in a
                            spectrum of light appearing in the sky.
                        </AccordionSection>

                        <AccordionSection name="accordion-3" label="Rainbow Accordion">
                            A rainbow is a meteorological phenomenon that is caused by reflection,
                            refraction and dispersion of light in water droplets resulting in a
                            spectrum of light appearing in the sky.
                        </AccordionSection>
                    </Accordion>
                </Card>
            </div>
        );
    }
}

<AccordionExample />;
accordions disabled
import React from 'react';
import { Card, Accordion, AccordionSection } from 'react-rainbow-components';

<div className="rainbow-m-around_xx-large">
    <Card>
        <Accordion>
            <AccordionSection label="Rainbow Accordion">
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
            <AccordionSection disabled label="Rainbow Accordion">
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
            <AccordionSection disabled label="Rainbow Accordion">
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
        </Accordion>
    </Card>
</div>
Properties
NameTypeDefault valueDescription
id
stringundefined

The id of the outer element.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied for the outer element.

children
nodenull
multiple
boolfalse

If true, expands multiples AccordionSections. This value defaults to false.

onToggleSection
functionundefined

Action fired when an AccordionSection is selected. The event params include the name of the selected AccordionSection.

activeSectionNames
string[] | stringundefined

It contain the name of the AccordionSection that is expanded. It is an array of string when multiple is true, or a string when when multiple is false. It must match the name of the AccordionSection.