content logo

React Accordions:

React Accordion with Dashed Line Border

Websites that do not look for graphic and attractive appearances and the lightness of the website is of particular importance to them should use simple and compact code. In this post, we have prepared one of these codes for accordion. These codes do not have the effect of displaying in hover time, and only around each item in the accordion is a dotted line as a border.

#

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