ReactJS Accessible Accordion Panel

Developer
Brian
Size
5,767 Kb
Views
26,312
  1. ReactJS Accessible Accordion Panel Previews
  2. ReactJS Accessible Accordion Panel HTML Codes
  3. ReactJS Accessible Accordion Panel CSS Codes
  4. ReactJS Accessible Accordion Panel JS Codes

How do I make an reactjs accessible accordion panel?

A simple self contained ReactJS accordion panel. Animations are handled by the React transition group. Can be used in a directly controlled way to only have one panel show at a time. . What is a reactjs accessible accordion panel? How do you make a reactjs accessible accordion panel? This script and codes were developed by Brian on 22 November 2022, Tuesday.

ReactJS Accessible Accordion Panel Previews
IQ Test

ReactJS Accessible Accordion Panel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ReactJS Accessible Accordion Panel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://fb.me/react-with-addons-0.14.3.js'></script> <script src="js/index.js"></script>
</body>
</html>

ReactJS Accessible Accordion Panel - Script Codes CSS Codes

body { background: #1c1c1f; color: white; padding: 50px; position: relative; font: 16px / 1 Arial;
}
.accordion { width: 400px;
}
.accordion--label { background-color: transparent; border: 1px solid #fff; color: inherit; padding: 10px; position: relative; text-align: left; -webkit-transition: background-color .3s; transition: background-color .3s; width: 100%; outline-color: #fff;
}
.accordion--arrow { font-weight: bold; position: absolute; right: 15px; top: 10px; -webkit-transition: .3s; transition: .3s;
}
.accordion--details { background-color: #4C4C52; padding: 15px;
}
.accordion_expanded .accordion--label { background-color: #fff; color: black;
}
.accordion_expanded .accordion--arrow { -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.animation--slide-down-enter { max-height: 0; overflow: hidden; opacity: 0; -webkit-transition: max-height .3s ease-in, opacity .3s ease-in; transition: max-height .3s ease-in, opacity .3s ease-in;
}
.animation--slide-down-enter.animation--slide-down-enter-active { max-height: 500px; opacity: 1;
}
.animation--slide-down-leave { max-height: 500px; opacity: 1; -webkit-transition: max-height .3s ease-out, opacity .3s ease-out; transition: max-height .3s ease-out, opacity .3s ease-out;
}
.animation--slide-down-leave.animation--slide-down-leave-active { max-height: 0; opacity: 0;
}

ReactJS Accessible Accordion Panel - Script Codes JS Codes

"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
// Ignore this
var mockLoremText = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum explicabo, expedita. Suscipit debitis numquam, nobis nesciunt temporibus minus hic praesentium esse earum cum provident culpa pariatur consectetur porro maiores, eum, eveniet aliquid. Consequuntur omnis temporibus laudantium ipsum mollitia, minus explicabo corrupti odit quisquam fugit itaque provident adipisci hic in nesciunt!";
// Actual code
var App = React.createClass({	displayName: "App",	render: function render() {	return React.createElement(	"div",	{ className: "main" },	React.createElement(	"h3",	null,	"Here is a single non controlled accordion panel"	),	React.createElement(	AccordionPanel,	{ label: "Here is some Lorem Ipsum Text" },	mockLoremText	),	React.createElement("br", null),	React.createElement("br", null),	React.createElement(	"h3",	null,	"Here are several side-by-side"	),	React.createElement(	"span",	null,	"(all can be opened at once)"	),	React.createElement("br", null),	React.createElement(	AccordionPanel,	{ label: "Controlled Accordion Panel" },	mockLoremText	),	React.createElement(	AccordionPanel,	{ label: "Side-by-side panel" },	mockLoremText	),	React.createElement(	AccordionPanel,	{ label: "Side-by-side panel" },	mockLoremText	),	React.createElement("br", null),	React.createElement("br", null),	React.createElement(	"h3",	null,	"Here are AccordionPanels warpped in an AccordionArea"	),	React.createElement(	"span",	null,	"This will directly control the child panels, so only one can be open at once"	),	React.createElement(	AccordionArea,	null,	React.createElement(	AccordionPanel,	{ label: "Controlled Accordion Panel" },	mockLoremText	),	React.createElement(	AccordionPanel,	{ label: "Controlled Accordion Panel" },	mockLoremText	),	React.createElement(	AccordionPanel,	{ label: "Controlled Accordion Panel" },	mockLoremText	),	React.createElement(	AccordionPanel,	{ label: "Controlled Accordion Panel" },	mockLoremText	)	)	);	}
});
// TODO: make this use the classNames npm package
var AccordionPanel = React.createClass({	displayName: "AccordionPanel",	propTypes: {	children: React.PropTypes.node.isRequired,	defaultExpanded: React.PropTypes.bool,	expanded: React.PropTypes.bool,	label: React.PropTypes.node.isRequired,	onLabelClick: React.PropTypes.func	},	getDefaultProps: function getDefaultProps() {	return {	defaultExpanded: false	};	},	getInitialState: function getInitialState() {	return {	expanded: this.props.defaultExpanded	};	},	render: function render() {	var expandedClass = this.isExpanded() ? ' accordion_expanded' : '';	return React.createElement(	"div",	_extends({}, this.props, { className: 'accordion' + expandedClass }),	this.renderLabel(),	this.renderDetails()	);	},	renderLabel: function renderLabel() {	return React.createElement(	"button",	this.getLabelProps(),	this.props.label,	this.renderAccordionArrow()	);	},	renderAccordionArrow: function renderAccordionArrow() {	return React.createElement(	"div",	{ className: "accordion--arrow" },	'>'	);	},	renderDetails: function renderDetails() {	var ReactTransition = React.addons.CSSTransitionGroup;	var details = null;	if (this.isExpanded()) {	details = React.createElement(	"div",	{ className: "accordion--details", key: "details" },	this.props.children	);	}	return React.createElement(	ReactTransition,	{ component: "div", transitionName: "animation--slide-down" },	details	);	},	getLabelProps: function getLabelProps() {	var action = this.isExpanded() ? 'collapse' : 'expand';	return {	'aria-expanded': this.isExpanded(),	className: "accordion--label",	onClick: this.handleLabelClick	};	},	handleLabelClick: function handleLabelClick() {	this.setState({ expanded: !this.state.expanded });	if (this.props.onLabelClick) {	this.props.onLabelClick();	}	},	isExpanded: function isExpanded() {	return this.props.expanded !== undefined ? this.props.expanded : this.state.expanded;	}
});
var AccordionArea = React.createClass({	displayName: "AccordionArea",	propTypes: {	children: React.PropTypes.node.isRequired,	defaultSelectedIndex: React.PropTypes.number,	selectedIndex: React.PropTypes.number	},	getDefaultProps: function getDefaultProps() {	return {	defaultSelectedIndex: null	};	},	getInitialState: function getInitialState() {	return {	selectedIndex: this.props.defaultSelectedIndex	};	},	render: function render() {	return React.createElement(	"div",	{ className: "accordion-area" },	React.Children.map(this.props.children, this.renderChild)	);	},	renderChild: function renderChild(child, index) {	return React.cloneElement(child, this.getInjectedProps(index));	},	getInjectedProps: function getInjectedProps(index) {	return {	expanded: this.getIndex() === index,	onLabelClick: this.handlePanelClick.bind(this, index)	};	},	getIndex: function getIndex() {	return this.props.selectedIndex !== undefined ? this.props.selectedIndex : this.state.selectedIndex;	},	handlePanelClick: function handlePanelClick(index) {	var newIndex = this.getIndex() === index ? null : index;	this.setState({ selectedIndex: newIndex });	}
});
React.render(React.createElement(App, null), document.getElementById('app'));
ReactJS Accessible Accordion Panel - Script Codes
ReactJS Accessible Accordion Panel - Script Codes
Home Page Home
Developer Brian
Username brian-baum
Uploaded November 22, 2022
Rating 3
Size 5,767 Kb
Views 26,312
Do you need developer help for ReactJS Accessible Accordion Panel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brian (brian-baum) Script Codes
Name
CSS dropdowns
AngularJS contact list
ReactJS Image Carousel
JQuery exercise
JQuery countdown plugin
JQuery hash nav plugin
Smooth Scrolling in ReactJS
Responsive demo page
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!