TOP 16 React.js Accordions

React Accordion

See the Pen React Accordion by Elaine Huang (@elainehuang) on CodePen.

[su_button url=”https://codepen.io/elainehuang/pen/XVNXrJ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-collapsy

[su_button url=”https://github.com/gogoair/react-collapsy ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

React accordion

[su_button url=”https://codepen.io/DNLHC/pen/BRmJrj ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-accessible-accordion

[su_button url=”https://react-accessible-accordion.springload.co.nz/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

[su_button url=”https://github.com/springload/react-accessible-accordion ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-accordeon

React accordion component with expand/collapse CSS animation. The event trigger can be configured to any component, such in the navigation and content.

[su_button url=”http://jearwebdevelopment.com/react-accordeon/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-accordion-with-header

React accordion component with customizable flexbox header.

Author

[su_button url=”https://jforaker.github.io/react-accordion-with-header/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

React Accordion

React accordion UI component.

See the Pen React Accordion UI Component by Tobi Weinstock (@tvweinstock) on CodePen.

[su_button url=”https://codepen.io/tvweinstock/pen/jqLVQQ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-responsive-accordion

React component to wrap content in accordion element.

[su_button url=”https://github.com/glennflanagan/react-responsive-accordion ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-collapsible

React component to wrap content in collapsible element with trigger to open and close. It’s like an accordion, but where any number of sections can be open at the same time.

[su_button url=”https://github.com/glennflanagan/react-collapsible ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-accordion-component

Minimal UI accordion component written in React.

[su_button url=”https://github.com/saulecabrera/react-accordion-component ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-tabbordion

Universal, semantic and accessible React state managing components for creating accordions and tabs.

[su_button url=”https://merri.github.io/react-tabbordion/ ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

rc-collapse

React collapse/accordion.

[su_button url=”https://github.com/react-component/collapse ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc.

[su_button url=”https://github.com/oblador/react-native-collapsible ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-sanfona

Accessible react accordion component.

[su_button url=”https://github.com/daviferreira/react-sanfona ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

react-native-accordion

react-native-accordion is an easy to use accordion component for React Native app.

[su_button url=”https://github.com/naoufal/react-native-accordion ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

React Accordion Box

Simple accordion in React.js.

[su_button url=”https://codepen.io/adamaoc/pen/wBGGQv?__cf_chl_jschl_tk__=1d148a8e7b6e1be2b8e63f64dec33c276750ee17-1590141412-0-AXnTjSk3G9nIVW2_PlfIkNq6Pez8gl7pnmJjvRqE7EwR3ECZQJ8piaONvyEbahWo7uaokiPBD4JfU9k-10DMkXnNZ91nDAMQPJV6d88o-BQAJ6s8iNqUbi5rNlHm9xgOaDGhc9U4SY5eFcfe1lzb-3P60rOW2iarGzobqQSQ9OACZxyQISSRZOHjql7YbEarz_GQwhMpgJu381Myr79_s5zWoQuDMzhz2-ysVk8ic7Wg4i5YGYPMAfe6RqYKKIRsa4t13micQJTzCS7T-JBJ6goSpma4Kln9A6x-8UgNjigN4P9WCKMSevdJ_RA0aTu5a7mddp-2rZmSTIn5R6m_pRZEZiacTrI6XtH-Ga9JbqHz ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]