content logo

React Accordions:

React Accordion with Rounded Border Corners

In simple websites without special graphics, simple looking items should be used so that all elements of the website are compatible. The accordion we put in this post is also simple and all the text and titles are in black. This accordion has a thin black border around the titles. This accordion uses React and is responsive.

#

Rounded Accordion Code

#

Accordion Boeder Radius

#

HTML Accorion with React

#

Accordion with Border Code

<!-- 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 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  padding: 30px;
}
.wrapper {
  width: 600px;
  margin: 0 auto;
}
.accordion-wrapper + * {
  margin-top: 0.5em;
}
.accordion-item {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
  height: auto;
  max-height: 9999px;
}
.accordion-item.collapsed {
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}
.accordion-title {
  font-weight: 600;
  cursor: pointer;
  color: #666;
  padding: 0.5em 1.5em;
  border: solid 1px #ccc;
  border-radius: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-title::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
}
.accordion-title:hover,
.accordion-title.open {
  color: black;
}
.accordion-title.open::after {
  content: "";
  border-top: 0;
  border-bottom: 5px solid;
}
.accordion-content {
  padding: 1em 1.5em;
}
const Accordion = ({ title, children }) => {
  const [isOpen, setOpen] = React.useState(false);
  return /*#__PURE__*/(
    React.createElement("div", { className: "accordion-wrapper" }, /*#__PURE__*/
    React.createElement("div", {
      className: `accordion-title ${isOpen ? "open" : ""}`,
      onClick: () => setOpen(!isOpen) },
    title), /*#__PURE__*/
    React.createElement("div", { className: `accordion-item ${!isOpen ? "collapsed" : ""}` }, /*#__PURE__*/
    React.createElement("div", { className: "accordion-content" }, children))));
};
const App = () => /*#__PURE__*/
React.createElement("div", { className: "wrapper" }, /*#__PURE__*/
React.createElement(Accordion, { title: "Why is the sky blue?" }, "Sunlight reaches Earth's atmosphere and is scattered in all directions by all the gases and particles in the air. Blue light is scattered more than the other colors because it travels as shorter, smaller waves. This is why we see a blue sky most of the time."), /*#__PURE__*/
React.createElement(Accordion, { title: "What's It Like Inside Jupiter?" }, "It's really hot inside Jupiter! No one knows exactly how hot, but scientists think it could be about 43,000\xB0F (24,000\xB0C) near Jupiter's center, or core."), /*#__PURE__*/
React.createElement(Accordion, { title: "What Is a Black Hole?" }, "A black hole is an area of such immense gravity that nothing -- not even light -- can escape from it."));
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("app"));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.10.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.1/umd/react-dom.production.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/16.10.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.1/umd/react-dom.production.min.js'></script>
<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  padding: 30px;
}
.wrapper {
  width: 600px;
  margin: 0 auto;
}
.accordion-wrapper + * {
  margin-top: 0.5em;
}
.accordion-item {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
  height: auto;
  max-height: 9999px;
}
.accordion-item.collapsed {
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}
.accordion-title {
  font-weight: 600;
  cursor: pointer;
  color: #666;
  padding: 0.5em 1.5em;
  border: solid 1px #ccc;
  border-radius: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-title::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
}
.accordion-title:hover,
.accordion-title.open {
  color: black;
}
.accordion-title.open::after {
  content: "";
  border-top: 0;
  border-bottom: 5px solid;
}
.accordion-content {
  padding: 1em 1.5em;
}
</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 Accordion = ({ title, children }) => {
  const [isOpen, setOpen] = React.useState(false);
  return /*#__PURE__*/(
    React.createElement("div", { className: "accordion-wrapper" }, /*#__PURE__*/
    React.createElement("div", {
      className: `accordion-title ${isOpen ? "open" : ""}`,
      onClick: () => setOpen(!isOpen) },
    title), /*#__PURE__*/
    React.createElement("div", { className: `accordion-item ${!isOpen ? "collapsed" : ""}` }, /*#__PURE__*/
    React.createElement("div", { className: "accordion-content" }, children))));
};
const App = () => /*#__PURE__*/
React.createElement("div", { className: "wrapper" }, /*#__PURE__*/
React.createElement(Accordion, { title: "Why is the sky blue?" }, "Sunlight reaches Earth's atmosphere and is scattered in all directions by all the gases and particles in the air. Blue light is scattered more than the other colors because it travels as shorter, smaller waves. This is why we see a blue sky most of the time."), /*#__PURE__*/
React.createElement(Accordion, { title: "What's It Like Inside Jupiter?" }, "It's really hot inside Jupiter! No one knows exactly how hot, but scientists think it could be about 43,000\xB0F (24,000\xB0C) near Jupiter's center, or core."), /*#__PURE__*/
React.createElement(Accordion, { title: "What Is a Black Hole?" }, "A black hole is an area of such immense gravity that nothing -- not even light -- can escape from it."));
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("app"));
</script>

</body>
</html>
Preview