accordion-fog

Graphical control element comprising a vertically stacked list of items. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. Gsap is used for animations, follow this link for more information on gsap https://greensock.com/

About

Accordion-fog is still on the development and learning stage. Feel free to give a feedback, suggestion or advise. Animated circles are main feature of this accordion, be sure to check them out by using FogAccordionBackground or FogAccordionCircles components.

• 0.2.0 updates: light/dark theme toggle depending on preferred color scheme (with darkMode prop) colored styles awailable with new colorFilled prop

Example

Checkout cube animated accordion by following this link

Installation

1yarn add accordion-fog
2
3# or
4
5npm i accordion-fog

Import Components

1import {
2  FogAccordion,
3  FogAccordionBackground,
4  FogAccordionCircles,
5  FogAccordionContent,
6  FogAccordionHeader,
7  FogAccordionIcon,
8  FogAccordionItem,
9  FogAccordionTitle,
10} from 'accordion-fog';

Components

• FogAccordionBackground: custom background.

• FogAccordionCircles: three animated circles for the background.

• FogAccordion: main accordion wrapper.

• FogAccordionItem: accordion item wrapper, manages state of a single item.

• FogAccordionHeader: triggers opening/closing of a single accordion item.

• FogAccordionTitle: displays Title for accordion item, takes props as well as children.

• FogAccordionIcon: an animated arrow icon.

• FogAccordionContent: the main content for the accordion item.

Usage

Accordion is closed by default, each item can be toggled

Note 🚨 Each FogAccordionHeader must be passed an index prop

1<FogAccordion>
2  <FogAccordionItem>
3    <FogAccordionHeader index={0}>
4      <FogAccordionTitle title={'Props title 1'}>
5        Accordion title 1
6      </FogAccordionTitle>
7      <FogAccordionIcon />
8    </FogAccordionHeader>
9    <FogAccordionContent>
10      <div>
11        <p>Accordion content</p>
12        <p>
13          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum,
14          quidem voluptatibus. Repudiandae distinctio aperiam, laudantium sequi
15          numquam exercitationem. Saepe, doloremque. Lorem ipsum dolor sit amet
16          consectetur adipisicing elit. Amet eligendi cupiditate, repellendus
17          mollitia at sed aut quaerat voluptas ex eos debitis!
18        </p>
19      </div>
20    </FogAccordionContent>
21  </FogAccordionItem>
22  <FogAccordionItem>
23    <FogAccordionHeader index={1}>
24      <FogAccordionTitle>Accordion title 2</FogAccordionTitle>
25      <FogAccordionIcon />
26    </FogAccordionHeader>
27    <FogAccordionContent>
28      <div>
29        <p>Accordion second content</p>
30      </div>
31    </FogAccordionContent>
32  </FogAccordionItem>
33</FogAccordion>

Default regular FogAccordionContent max-height is set to 500px, to change max-height value pass the maxHeight prop to FogAccordionContent. Overflow is set to auto.

1<FogAccordionContent maxHeight={'300px'}>
2  {...}
3</FogAccordionContent>

To make multiple accordion items be visible at the same time, pass the multipleToggle prop

1<FogAccordion multipleToggle>
2  {...}
3</FogAccordion>

To apply cube animation, pass the cube prop

1<FogAccordion cube>
2  {...}
3</FogAccordion>

To apply colored styles, pass the colorFilled prop

1<FogAccordion colorFilled>
2  {...}
3</FogAccordion>

To make accordion style switch accordiong to preferred color scheme, pass the darkMode prop

1<FogAccordion darkMode>
2  {...}
3</FogAccordion>

To add background, wrap your content in FogAccordionBackground, pass colorFilled prop to apply styles or use darkMode prop to apply styles according to preferred color scheme.

1<FogAccordionBackground darkMode>
2  <FogAccordion>
3    {...}
4  </FogAccordion>
5</FogAccordionBackground>

1<FogAccordionBackground colorFilled>
2  <FogAccordion>
3    {...}
4  </FogAccordion>
5</FogAccordionBackground>

There is a possibility to use animated circles on the background, just add FogAccordionCircles anywhere in your components. Add className="colorFilled" to color the circles

1<div>
2    <FogAccordionCircles className="colorFilled"/>
3    {...}
4</div>

To change arrow icon pass icon prop to FogAccordionIcon after importing it as a ReactComponent

1<FogAccordionIcon icon={<Arrow />}>
2  {...}
3</FogAccordionIcon>

Or pass icon component as a child

1<FogAccordionIcon>
2  <Arrow />
3</FogAccordionIcon>