content logo

React Accordions:

Read More Accordion using React JS

Suppose you have an informative website and upload various information simultaneously. In that case, it is better to use a menu and not mention all data on a single page. The Read More Accordion using React JS is available here to help you achieve this purpose. With the help of this beautiful React Accordion Code, you can add different parts to a website and save the physical space of the main page. If you want to use React Simple Accordion code, you can write only the title of the content in the main page and add other details in the hidden part.

We have presented the preview of this HTML Accordion with React code below to introduce its performance better. As you can see in the following preview, this code has a gray background and all texts are black. In other words, the title and other information are located in a field. You can see a blue button at the bottom of the field with white writing. The “Read more” phrase is written in this button, and when you click on this section, your considered field will be enlarged and you can read more detail about a specific subject. This Read More Accordion Example shows a great performance of the mentioned code.

#

React Accordion Code

#

React Simple Accordion

#

HTML Accordion with React

#

Read More Accordion Example

<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
	width: 50%;
	margin: 0 auto;
	padding: 10px;
}
h2 {
	font-size: 3rem;
}
h3 {
	font-size: 2rem;
}
button {
	font-size: 1.5rem;
	background-color: navy;
	color: white;
	border: none;
	border-radius: 10px;
	cursor: pointer;
}
button:hover {
	transform: translate(1px, 1px);
}
const AccordionWrapper = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: lightgrey;
    border-radius: 10px;
    height: auto;
    padding: 2%;
    text-align: center;
    // transition: all 0.6s ease-in-out;
`;
const InternalWrapper = styled.div`
    width: 100%;
    max-height: ${props => props.open ? '100px' : '0'};
    transition: all 0.4s ease-in-out;
    overflow: hidden;
`;
const Accordion = ({ title, subTitle, btnText }) => {
    const [open, setOpen] = React.useState(false);
    const handleClick = () => {
        setOpen(!open);
    };
    return /*#__PURE__*/(
        React.createElement(AccordionWrapper, null, /*#__PURE__*/
            React.createElement("h2", null, title), /*#__PURE__*/
            React.createElement("h3", null, subTitle), /*#__PURE__*/
            React.createElement(InternalWrapper, { open: open }, /*#__PURE__*/
                React.createElement("h1", null, "Hello")), /*#__PURE__*/
            React.createElement("button", { padding: "5px", onClick: handleClick },
                btnText)));
};
Accordion.defaultProps = {
    title: 'title',
    subTitle: 'subtitle',
    btnText: 'Read more >>'
};
ReactDOM.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('app'));
<script src="http://frontendfreecode.com/codes/files/react.development.js"></script>
<script src="http://frontendfreecode.com/codes/files/react-dom.development.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src="http://frontendfreecode.com/codes/files/react.development.js"></script>
<script src="http://frontendfreecode.com/codes/files/react-dom.development.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.min.js'></script>
<style>
body {
	width: 50%;
	margin: 0 auto;
	padding: 10px;
}
h2 {
	font-size: 3rem;
}
h3 {
	font-size: 2rem;
}
button {
	font-size: 1.5rem;
	background-color: navy;
	color: white;
	border: none;
	border-radius: 10px;
	cursor: pointer;
}
button:hover {
	transform: translate(1px, 1px);
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const AccordionWrapper = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: lightgrey;
    border-radius: 10px;
    height: auto;
    padding: 2%;
    text-align: center;
    // transition: all 0.6s ease-in-out;
`;
const InternalWrapper = styled.div`
    width: 100%;
    max-height: ${props => props.open ? '100px' : '0'};
    transition: all 0.4s ease-in-out;
    overflow: hidden;
`;
const Accordion = ({ title, subTitle, btnText }) => {
    const [open, setOpen] = React.useState(false);
    const handleClick = () => {
        setOpen(!open);
    };
    return /*#__PURE__*/(
        React.createElement(AccordionWrapper, null, /*#__PURE__*/
            React.createElement("h2", null, title), /*#__PURE__*/
            React.createElement("h3", null, subTitle), /*#__PURE__*/
            React.createElement(InternalWrapper, { open: open }, /*#__PURE__*/
                React.createElement("h1", null, "Hello")), /*#__PURE__*/
            React.createElement("button", { padding: "5px", onClick: handleClick },
                btnText)));
};
Accordion.defaultProps = {
    title: 'title',
    subTitle: 'subtitle',
    btnText: 'Read more >>'
};
ReactDOM.render( /*#__PURE__*/React.createElement(Accordion, null), document.getElementById('app'));
</script>

</body>
</html>
Preview