content logo

React Accordions:

React Accordion with Search Box and Filter

Using a search box on top of accordions can help users find what they are looking for. In this post, we have provided this accordion. This accordion has no background and between each item there is a thin gray divider line. By clicking on each accordion, its gray text will be displayed. This accordion uses React.

#

Accordion Search Code

#

Accordion Search Box

#

React Accordion Code

#

HTML Accordion Filter


<!-- 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>
                                                                            
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: "Poppins", sans-serif;
	font-size: 10px;
	background: #F6F8FC;
}
.heading {
	color: #212943;
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 2rem;
}
.container {
	margin: 0 auto;
	padding: 2rem;
	text-align: center;
}
form {
	display: flex;
	width: 35rem;
	background-color: #fff;
	align-items: center;
	margin: 0 auto;
	border-radius: 1rem;
	box-shadow: 0px 5px 13px 0px #DEE4F1;
}
form svg {
	height: 1rem;
	fill: #9EA6AE;
	width: 4rem;
}
.searchbar {
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	border: none;
	padding: 1rem;
	padding-left: 4rem;
	width: 100%;
	border-radius: 0.8rem;
}
.searchbar:focus {
	outline: none;
	box-shadow: 0 0 0 1.5px #DEE4F1, 0px 5px 13px 0px #DEE4F1;
}
.faq {
	margin: 3rem 0;
}
.question-wrapper {
	width: 35rem;
	border-bottom: 1px solid #DEE4F1;
	margin: 0 auto;
	padding: 1rem;
	transition: 1s;
}
.question {
	display: flex;
	font-size: 1rem;
	font-weight: 500;
	color: #212943;
	display: flex;
	justify-content: space-between;
}
.question svg {
	width: 1rem;
	height: 1.5rem;
	fill: #9EA6AE;
}
.question svg.active {
	transform: rotate(180deg);
}
.question svg:hover {
	opacity: 0.8;
}
button {
	background-color: transparent;
	border: none;
	cursor: pointer;
}
button:focus {
	outline: none;
}
.answer {
	display: none;
}
.answer.active {
	display: block;
	text-align: left;
	padding-top: 1.5rem;
	font-weight: light;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #9EA6AE;
	height: 0%;
	animation: slidein 0.4s;
	animation-fill-mode: forwards;
}
@keyframes slidein {
	from {
		opacity: 0.3;
		transform: translateY(-20%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}
const questions = [
{
  id: 1,
  question: 'Popular Articles',
  answer: 'Suspendisse ipsum elit, hendrerit id eleifend at, condimentum et mauris. Curabitur et libero vel arcu dignissim pulvinar ut ac leo. In sit amet orci et erat accumsan interdum.' },
{
  id: 2,
  question: 'Fix problems & request removals',
  answer: 'Suspendisse ipsum elit, hendrerit id eleifend at, condimentum et mauris. Curabitur et libero vel arcu dignissim pulvinar ut ac leo. In sit amet orci et erat accumsan interdum.' },
{
  id: 3,
  question: 'Browse the web',
  answer: 'Suspendisse ipsum elit, hendrerit id eleifend at, condimentum et mauris. Curabitur et libero vel arcu dignissim pulvinar ut ac leo. In sit amet orci et erat accumsan interdum.' },
{
  id: 4,
  question: 'Search on your phone or tablet',
  answer: 'Suspendisse ipsum elit, hendrerit id eleifend at, condimentum et mauris. Curabitur et libero vel arcu dignissim pulvinar ut ac leo. In sit amet orci et erat accumsan interdum.' }];
function FAQ(props) {
  const [searchTerm, setSearchTerm] = React.useState('');
  const [searchResults, setSearchResults] = React.useState([]);
  const handleSearchChange = e => {
    setSearchTerm(e.target.value);
  };
  React.useEffect(() => {
    const results = props.data.filter((item) =>
    item.question.toLowerCase().includes(searchTerm));
    setSearchResults(results);
  }, [searchTerm]);
  return /*#__PURE__*/(
    React.createElement("div", { className: "container" }, /*#__PURE__*/
    React.createElement("h2", { className: "heading" }, "How can we help you?"), /*#__PURE__*/
    React.createElement(Searchbar, { onSearchChange: handleSearchChange }), /*#__PURE__*/
    React.createElement("section", { className: "faq" },
    searchResults.map(item => /*#__PURE__*/React.createElement(Question, { question: item.question, answer: item.answer })))));
}
const Searchbar = props => {
  const [value, setValue] = React.useState('');
  const handleChange = e => {
    setValue(e.target.value);
    props.onSearchChange(e);
  };
  return /*#__PURE__*/(
    React.createElement("form", null, /*#__PURE__*/
    React.createElement("svg", { viewBox: "0 0 512 512", width: "100", title: "search" }, /*#__PURE__*/
    React.createElement("path", { d: "M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" })), /*#__PURE__*/
    React.createElement("input", { className: "searchbar", type: "text", placeholder: "Describe your issue", onChange: handleChange, value: value })));
};
const Question = props => {
  const [isActive, setActive] = React.useState(false);
  const handleClick = id => {
    setActive(!isActive);
  };
  return /*#__PURE__*/(
    React.createElement("div", { className: "question-wrapper" }, /*#__PURE__*/
    React.createElement("div", { className: "question", id: props.id }, /*#__PURE__*/
    React.createElement("h3", null, props.question), /*#__PURE__*/
    React.createElement("button", { onClick: () => handleClick(props.id) }, /*#__PURE__*/
    React.createElement("svg", { className: isActive ? 'active' : '', viewBox: "0 0 320 512", width: "100", title: "angle-down" }, /*#__PURE__*/
    React.createElement("path", { d: "M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" })))), /*#__PURE__*/
    React.createElement("div", { className: isActive ? 'answer active' : 'answer' }, props.answer)));
};
ReactDOM.render( /*#__PURE__*/React.createElement(FAQ, { data: questions }), document.querySelector('#root'));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js'></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: "Poppins", sans-serif;
	font-size: 10px;
	background: #F6F8FC;
}
.heading {
	color: #212943;
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 2rem;
}
.container {
	margin: 0 auto;
	padding: 2rem;
	text-align: center;
}
form {
	display: flex;
	width: 35rem;
	background-color: #fff;
	align-items: center;
	margin: 0 auto;
	border-radius: 1rem;
	box-shadow: 0px 5px 13px 0px #DEE4F1;
}
form svg {
	height: 1rem;
	fill: #9EA6AE;
	width: 4rem;
}
.searchbar {
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	border: none;
	padding: 1rem;
	padding-left: 4rem;
	width: 100%;
	border-radius: 0.8rem;
}
.searchbar:focus {
	outline: none;
	box-shadow: 0 0 0 1.5px #DEE4F1, 0px 5px 13px 0px #DEE4F1;
}
.faq {
	margin: 3rem 0;
}
.question-wrapper {
	width: 35rem;
	border-bottom: 1px solid #DEE4F1;
	margin: 0 auto;
	padding: 1rem;
	transition: 1s;
}
.question {
	display: flex;
	font-size: 1rem;
	font-weight: 500;
	color: #212943;
	display: flex;
	justify-content: space-between;
}
.question svg {
	width: 1rem;
	height: 1.5rem;
	fill: #9EA6AE;
}
.question svg.active {
	transform: rotate(180deg);
}
.question svg:hover {
	opacity: 0.8;
}
button {
	background-color: transparent;
	border: none;
	cursor: pointer;
}
button:focus {
	outline: none;
}
.answer {
	display: none;
}
.answer.active {
	display: block;
	text-align: left;
	padding-top: 1.5rem;
	font-weight: light;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #9EA6AE;
	height: 0%;
	animation: slidein 0.4s;
	animation-fill-mode: forwards;
}
@keyframes slidein {
	from {
		opacity: 0.3;
		transform: translateY(-20%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}
</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>
const questions = [
{
  id: 1,
  question: 'Popular Articles',
  answer: 'Suspendisse ipsum elit, hendrerit id eleifend at, condimentum et mauris. Curabitur et libero vel arcu dignissim pulvinar ut ac leo. In sit amet orci et erat accumsan interdum.' },
{
  id: 2,
  question: 'Fix problems & request removals',
  answer: 'Suspendisse ipsum elit, hendrerit id eleifend at, condimentum et mauris. Curabitur et libero vel arcu dignissim pulvinar ut ac leo. In sit amet orci et erat accumsan interdum.' },
{
  id: 3,
  question: 'Browse the web',
  answer: 'Suspendisse ipsum elit, hendrerit id eleifend at, condimentum et mauris. Curabitur et libero vel arcu dignissim pulvinar ut ac leo. In sit amet orci et erat accumsan interdum.' },
{
  id: 4,
  question: 'Search on your phone or tablet',
  answer: 'Suspendisse ipsum elit, hendrerit id eleifend at, condimentum et mauris. Curabitur et libero vel arcu dignissim pulvinar ut ac leo. In sit amet orci et erat accumsan interdum.' }];
function FAQ(props) {
  const [searchTerm, setSearchTerm] = React.useState('');
  const [searchResults, setSearchResults] = React.useState([]);
  const handleSearchChange = e => {
    setSearchTerm(e.target.value);
  };
  React.useEffect(() => {
    const results = props.data.filter((item) =>
    item.question.toLowerCase().includes(searchTerm));
    setSearchResults(results);
  }, [searchTerm]);
  return /*#__PURE__*/(
    React.createElement("div", { className: "container" }, /*#__PURE__*/
    React.createElement("h2", { className: "heading" }, "How can we help you?"), /*#__PURE__*/
    React.createElement(Searchbar, { onSearchChange: handleSearchChange }), /*#__PURE__*/
    React.createElement("section", { className: "faq" },
    searchResults.map(item => /*#__PURE__*/React.createElement(Question, { question: item.question, answer: item.answer })))));
}
const Searchbar = props => {
  const [value, setValue] = React.useState('');
  const handleChange = e => {
    setValue(e.target.value);
    props.onSearchChange(e);
  };
  return /*#__PURE__*/(
    React.createElement("form", null, /*#__PURE__*/
    React.createElement("svg", { viewBox: "0 0 512 512", width: "100", title: "search" }, /*#__PURE__*/
    React.createElement("path", { d: "M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" })), /*#__PURE__*/
    React.createElement("input", { className: "searchbar", type: "text", placeholder: "Describe your issue", onChange: handleChange, value: value })));
};
const Question = props => {
  const [isActive, setActive] = React.useState(false);
  const handleClick = id => {
    setActive(!isActive);
  };
  return /*#__PURE__*/(
    React.createElement("div", { className: "question-wrapper" }, /*#__PURE__*/
    React.createElement("div", { className: "question", id: props.id }, /*#__PURE__*/
    React.createElement("h3", null, props.question), /*#__PURE__*/
    React.createElement("button", { onClick: () => handleClick(props.id) }, /*#__PURE__*/
    React.createElement("svg", { className: isActive ? 'active' : '', viewBox: "0 0 320 512", width: "100", title: "angle-down" }, /*#__PURE__*/
    React.createElement("path", { d: "M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" })))), /*#__PURE__*/
    React.createElement("div", { className: isActive ? 'answer active' : 'answer' }, props.answer)));
};
ReactDOM.render( /*#__PURE__*/React.createElement(FAQ, { data: questions }), document.querySelector('#root'));
</script>

</body>
</html>
Preview