content logo

React Accordions:

React Accordion with Logo Image

If you have a web page and want to add different kinds of information all day, we recommend you use some menus to increase your website's beauty. In order to do that, you can use the React Accordion with Logo Image on your page and attract a huge number of visitors. This Simple React Accordion code is suitable for different kinds of websites. If you apply this JS Accordion with Image on your website, you can add a lot of information in a small physical place. As a result, the data on your page will be more accessible than before.

If you want to realize the performance of this HTML Accordion Code better, you can watch this preview below. As you see, this code has a blue theme and there are some images on the left side of each field where you can add your own logo in this part. On the right side of this code, you can see a pop-up button in white color and when you click on this part, you will face a white field below. This HTML Accordion with Logo is available for you totally free and you can change the detail parts based on your desire.

#

Simple React Accordion

#

HTML Accordion with Logo

#

JS Accordion with Image

#

HTML Accordion 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>
                                                                            
body {
	font-family: "Roboto", sans-serif;
	background: #E0E0E0;
	padding: 24px;
}
#logo-image {
	width: 100px;
}
.accordion {
	max-width: 800px;
	margin: 0 auto;
}
.accordionHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
	background: #2196F3;
	color: #FFFFFF;
	border-bottom: 1px solid #0d87e9;
	transition: 0.14s;
}
.accordionHeader:hover {
	background: #3ea4f5;
	cursor: pointer;
}
.accordionHeader svg {
	width: 24px;
	height: 24px;
	fill: #E0E0E0;
}
.accordionContent {
	padding: 16px;
	background: #FFFFFF;
}
class Accordion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            display: 'none',
            transform: ''
        };
        this.toggle = this.toggle.bind(this);
    }
    toggle() {
        const newDisplay = this.state.display == 'block' ? 'none' : 'block';
        const newTransform = this.state.transform == 'rotate(180deg)' ? '' : 'rotate(180deg)';
        this.setState({
            display: newDisplay,
            transform: newTransform
        });
    }
    render() {
        return /*#__PURE__*/(
            React.createElement("div", { className: "accordion" }, /*#__PURE__*/
                React.createElement("div", { className: "accordionHeader", onClick: this.toggle }, /*#__PURE__*/
                    React.createElement("img", { src: this.props.accordionImage, alt: "react", id: "logo-image" }), /*#__PURE__*/
                    React.createElement("p", null, this.props.accordionTitle), /*#__PURE__*/
                    React.createElement("svg", { style: { transform: this.state.transform }, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
                        React.createElement("path", { d: "M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" }), /*#__PURE__*/
                        React.createElement("path", { d: "M0-.75h24v24H0z", fill: "none" }))), /*#__PURE__*/
                React.createElement("div", { className: "accordionContent", style: { display: this.state.display } }, /*#__PURE__*/
                    React.createElement("p", null, this.props.accordionContent))));
    }
}
function App() {
    return /*#__PURE__*/(
        React.createElement("div", null, /*#__PURE__*/
            React.createElement(Accordion, {
                accordionTitle: "Testing",
                accordionContent: "Lorem ipsum...",
                accordionImage: "http://frontendfreecode.com/img/React-icon.svg.png"
            }), /*#__PURE__*/
            React.createElement(Accordion, {
                accordionTitle: "Two",
                accordionContent: "Lorem ipsum...",
                accordionImage: "http://frontendfreecode.com/img/React-icon.svg.png"
            }), /*#__PURE__*/
            React.createElement(Accordion, {
                accordionTitle: "Three",
                accordionContent: "Lorem ipsum...",
                accordionImage: "http://frontendfreecode.com/img/React-icon.svg.png"
            })));
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(App, null),
    document.getElementById('root'));
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
<style>
body {
	font-family: "Roboto", sans-serif;
	background: #E0E0E0;
	padding: 24px;
}
#logo-image {
	width: 100px;
}
.accordion {
	max-width: 800px;
	margin: 0 auto;
}
.accordionHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
	background: #2196F3;
	color: #FFFFFF;
	border-bottom: 1px solid #0d87e9;
	transition: 0.14s;
}
.accordionHeader:hover {
	background: #3ea4f5;
	cursor: pointer;
}
.accordionHeader svg {
	width: 24px;
	height: 24px;
	fill: #E0E0E0;
}
.accordionContent {
	padding: 16px;
	background: #FFFFFF;
}
</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 = {
            display: 'none',
            transform: ''
        };
        this.toggle = this.toggle.bind(this);
    }
    toggle() {
        const newDisplay = this.state.display == 'block' ? 'none' : 'block';
        const newTransform = this.state.transform == 'rotate(180deg)' ? '' : 'rotate(180deg)';
        this.setState({
            display: newDisplay,
            transform: newTransform
        });
    }
    render() {
        return /*#__PURE__*/(
            React.createElement("div", { className: "accordion" }, /*#__PURE__*/
                React.createElement("div", { className: "accordionHeader", onClick: this.toggle }, /*#__PURE__*/
                    React.createElement("img", { src: this.props.accordionImage, alt: "react", id: "logo-image" }), /*#__PURE__*/
                    React.createElement("p", null, this.props.accordionTitle), /*#__PURE__*/
                    React.createElement("svg", { style: { transform: this.state.transform }, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
                        React.createElement("path", { d: "M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" }), /*#__PURE__*/
                        React.createElement("path", { d: "M0-.75h24v24H0z", fill: "none" }))), /*#__PURE__*/
                React.createElement("div", { className: "accordionContent", style: { display: this.state.display } }, /*#__PURE__*/
                    React.createElement("p", null, this.props.accordionContent))));
    }
}
function App() {
    return /*#__PURE__*/(
        React.createElement("div", null, /*#__PURE__*/
            React.createElement(Accordion, {
                accordionTitle: "Testing",
                accordionContent: "Lorem ipsum...",
                accordionImage: "http://frontendfreecode.com/img/React-icon.svg.png"
            }), /*#__PURE__*/
            React.createElement(Accordion, {
                accordionTitle: "Two",
                accordionContent: "Lorem ipsum...",
                accordionImage: "http://frontendfreecode.com/img/React-icon.svg.png"
            }), /*#__PURE__*/
            React.createElement(Accordion, {
                accordionTitle: "Three",
                accordionContent: "Lorem ipsum...",
                accordionImage: "http://frontendfreecode.com/img/React-icon.svg.png"
            })));
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(App, null),
    document.getElementById('root'));
</script>

</body>
</html>
Preview