content logo

React Accordions:

Simple React Accordion with Divider Line

The accordion shown in this post is simple. This accordion has an icon to the left of the title. Clicking on any item changes its side icon and becomes a minus. This icon is in normal plus mode. There is a full width dividing line between the two items in the accordion. This is the black separator line. This accordion uses React and is responsive.

#

Simple React Accordion

#

Accordion with Icon

#

HTML Accordion with React JS

#

Accordion Divider Line Code


<!-- This script got from frontendfreecode.com -->
<div id="root"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
* {
	box-sizing: border-box;
}
.accessibility {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.accordion-title {
	font-weight: normal;
	border-bottom: 2px solid currentColor;
}
.accordion-btn {
	all: inherit;
	border-bottom: 0;
}
.accordion-btn:hover, .accordion-btn:focus {
	cursor: pointer;
}
.accordion-icon {
	border: 2px solid currentColor;
	display: inline-block;
	margin-right: 10px;
	padding: 0 2px;
	text-align: center;
	width: 25px;
}
.accordion-content[hidden] {
	opacity: 0;
	transform: scaleY(0);
}
.accordion-content {
	animation: showhide .3s ease-in-out;
	opacity: 1;
	transform: scaleY(1);
}
@keyframes showhide {
	0% {
		opacity: 0;
	}
	1% {
		opacity: 0;
		transform: scaleY(0);
	}
	100% {
		opacity: 1;
		transform: scaleY(1);
	}
}
class Accordion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    id: 0,
                    isCollapsed: true,
                    isAriaExpanded: false,
                    isHidden: true,
                    title: 'Accordion title ',
                    content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
                },
                {
                    id: 1,
                    isCollapsed: true,
                    isAriaExpanded: false,
                    isHidden: true,
                    title: 'Accordion title ',
                    content: 'Lorem ipsum quibusdam fuga amet cupiditate, temporibus ex doloremque.'
                }]
        };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e, id) {
        const itemIndex = this.state.items.findIndex(i => i.id === id);
        const item = { ...this.state.items[itemIndex] };
        const items = [...this.state.items];
        item.isCollapsed = !this.state.items[itemIndex].isCollapsed;
        item.isAriaExpanded = !this.state.items[itemIndex].isAriaExpanded;
        item.isHidden = !this.state.items[itemIndex].isHidden;
        items[itemIndex] = item;
        // Need to manage state based on which 'elem' triggered event?
        this.setState({ items: items });
    }
    render() {
        const items = this.state.items;
        return /*#__PURE__*/(
            React.createElement("div", { className: "accordion" },
                items.map((item) => /*#__PURE__*/
                    React.createElement(AccordionItem, {
                        key: item.id,
                        item: item,
                        ariaExpanded: items[item.id].isAriaExpanded,
                        collapsed: items[item.id].isCollapsed,
                        hidden: items[item.id].isHidden,
                        expand: this.handleClick
                    }))));
    }
}
const AccordionItem = ({ ...props }) => {
    const { item, ariaExpanded, collapsed, hidden, expand } = props;
    return /*#__PURE__*/(
        React.createElement("div", null, /*#__PURE__*/
            React.createElement("h2", { className: "accordion-title" }, /*#__PURE__*/
                React.createElement("button", {
                    className: "accordion-btn",
                    id: item.id,
                    "aria-expanded": ariaExpanded,
                    onClick: e => expand(e, item.id)
                }, /*#__PURE__*/
                    React.createElement("span", { className: "accessibility" }, collapsed ? 'expand' : 'collapse'), /*#__PURE__*/
                    React.createElement("span", { className: "accordion-icon", "aria-hidden": "true" }, collapsed ? '+' : '-'),
                    item.title, " ", item.id)), /*#__PURE__*/
            React.createElement("div", { className: "accordion-content", hidden: hidden }, /*#__PURE__*/
                React.createElement("p", null, "Content ", item.id, ": ", item.content))));
};
ReactDOM.render( /*#__PURE__*/
    React.createElement(Accordion, null),
    document.getElementById('root'));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<style>
* {
	box-sizing: border-box;
}
.accessibility {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.accordion-title {
	font-weight: normal;
	border-bottom: 2px solid currentColor;
}
.accordion-btn {
	all: inherit;
	border-bottom: 0;
}
.accordion-btn:hover, .accordion-btn:focus {
	cursor: pointer;
}
.accordion-icon {
	border: 2px solid currentColor;
	display: inline-block;
	margin-right: 10px;
	padding: 0 2px;
	text-align: center;
	width: 25px;
}
.accordion-content[hidden] {
	opacity: 0;
	transform: scaleY(0);
}
.accordion-content {
	animation: showhide .3s ease-in-out;
	opacity: 1;
	transform: scaleY(1);
}
@keyframes showhide {
	0% {
		opacity: 0;
	}
	1% {
		opacity: 0;
		transform: scaleY(0);
	}
	100% {
		opacity: 1;
		transform: scaleY(1);
	}
}
</style>

</head>
<body>
<div id="root"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class Accordion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    id: 0,
                    isCollapsed: true,
                    isAriaExpanded: false,
                    isHidden: true,
                    title: 'Accordion title ',
                    content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
                },
                {
                    id: 1,
                    isCollapsed: true,
                    isAriaExpanded: false,
                    isHidden: true,
                    title: 'Accordion title ',
                    content: 'Lorem ipsum quibusdam fuga amet cupiditate, temporibus ex doloremque.'
                }]
        };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e, id) {
        const itemIndex = this.state.items.findIndex(i => i.id === id);
        const item = { ...this.state.items[itemIndex] };
        const items = [...this.state.items];
        item.isCollapsed = !this.state.items[itemIndex].isCollapsed;
        item.isAriaExpanded = !this.state.items[itemIndex].isAriaExpanded;
        item.isHidden = !this.state.items[itemIndex].isHidden;
        items[itemIndex] = item;
        // Need to manage state based on which 'elem' triggered event?
        this.setState({ items: items });
    }
    render() {
        const items = this.state.items;
        return /*#__PURE__*/(
            React.createElement("div", { className: "accordion" },
                items.map((item) => /*#__PURE__*/
                    React.createElement(AccordionItem, {
                        key: item.id,
                        item: item,
                        ariaExpanded: items[item.id].isAriaExpanded,
                        collapsed: items[item.id].isCollapsed,
                        hidden: items[item.id].isHidden,
                        expand: this.handleClick
                    }))));
    }
}
const AccordionItem = ({ ...props }) => {
    const { item, ariaExpanded, collapsed, hidden, expand } = props;
    return /*#__PURE__*/(
        React.createElement("div", null, /*#__PURE__*/
            React.createElement("h2", { className: "accordion-title" }, /*#__PURE__*/
                React.createElement("button", {
                    className: "accordion-btn",
                    id: item.id,
                    "aria-expanded": ariaExpanded,
                    onClick: e => expand(e, item.id)
                }, /*#__PURE__*/
                    React.createElement("span", { className: "accessibility" }, collapsed ? 'expand' : 'collapse'), /*#__PURE__*/
                    React.createElement("span", { className: "accordion-icon", "aria-hidden": "true" }, collapsed ? '+' : '-'),
                    item.title, " ", item.id)), /*#__PURE__*/
            React.createElement("div", { className: "accordion-content", hidden: hidden }, /*#__PURE__*/
                React.createElement("p", null, "Content ", item.id, ": ", item.content))));
};
ReactDOM.render( /*#__PURE__*/
    React.createElement(Accordion, null),
    document.getElementById('root'));
</script>

</body>
</html>
Preview