React Accordions:

React Accordion with Dashed Line Border

Websites that are not looking for a stylish design for their page can use this code easily. This is the React Accordion with Dashed Line Border that is suitable for all kinds of websites. As it is a Simple React Accordion code, you can apply it on your website if you are not looking for an eye-catching design for your page. In other words, we can say that the Dotted Line Accordion Border code is the best idea for people who like simplicity. As you know, most people like simplicity and as a result, this post can be useful for all people.

To have a better understanding of this Accordion Dashed Border Code, you can see its preview below. As you see, this code has a white and simple background with black text. All the following items are located in that field, and they are separated from each other with the same border. It is worth mentioning that the following HTML Accordion with Border code has no effect while displaying the detailed part. When you click on each section, you will face its related detail with no effect. If you want to disappear the detail of the section, you need to click on the selected part once again.

Simple React Accordion

Dotted Line Accordion Border

Accordion Dashed Border Code

HTML Accordion with Border

<!-- This script got from frontendfreecode.com -->
<div class="accordion">
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 1</h3>
    <div class="accordion-body">These are the contents of panel 1</div>
  </div>
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 2</h3>
    <div class="accordion-body">These are the contents of panel 2</div>
  </div>
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 3</h3>
    <div class="accordion-body">These are the contents of panel 3</div>
  </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.accordion-header {
  cursor: pointer;
}
.accordion-panel {
  border: 1px dashed black;
  margin: 2px;
  padding: 5px;
}
.accordion-panel > .accordion-body {
  display: none;
}
.accordion-panel.accordion-expanded > .accordion-body {
  display: block;
}

class Accordions extends React.Component {
    componentDidMount() {
        const accordions = document.querySelectorAll(".accordion");
        for (const accordion of accordions) {
            const panels = accordion.querySelectorAll(".accordion-panel");
            for (const panel of panels) {
                const head = panel.querySelector(".accordion-header");
                head.addEventListener('click', () => {
                    for (const otherPanel of panels) {
                        if (otherPanel !== panel) {
                            otherPanel.classList.remove('accordion-expanded');
                        }
                    }
                    panel.classList.toggle('accordion-expanded');
                });
            }
        }
    }
    render() {
        return null;
    }
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(Accordions, null),
    document.createElement('div') // detached container
);

<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 -->

<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>
.accordion-header {
  cursor: pointer;
}
.accordion-panel {
  border: 1px dashed black;
  margin: 2px;
  padding: 5px;
}
.accordion-panel > .accordion-body {
  display: none;
}
.accordion-panel.accordion-expanded > .accordion-body {
  display: block;
}
</style>

</head>
<body>
<div class="accordion">
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 1</h3>
    <div class="accordion-body">These are the contents of panel 1</div>
  </div>
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 2</h3>
    <div class="accordion-body">These are the contents of panel 2</div>
  </div>
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 3</h3>
    <div class="accordion-body">These are the contents of panel 3</div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class Accordions extends React.Component {
    componentDidMount() {
        const accordions = document.querySelectorAll(".accordion");
        for (const accordion of accordions) {
            const panels = accordion.querySelectorAll(".accordion-panel");
            for (const panel of panels) {
                const head = panel.querySelector(".accordion-header");
                head.addEventListener('click', () => {
                    for (const otherPanel of panels) {
                        if (otherPanel !== panel) {
                            otherPanel.classList.remove('accordion-expanded');
                        }
                    }
                    panel.classList.toggle('accordion-expanded');
                });
            }
        }
    }
    render() {
        return null;
    }
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(Accordions, null),
    document.createElement('div') // detached container
);
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS