Create a React collapsible box component

In this snippet, we learn how to create a collapsible box component in React

First step: Create a component call Collapsible.js with JSX code below




Step 2: Import Collapsible and fill the data to your app




In the code above, colaps array contain all of collapsible items, if you want a single collapsible box, you just put one item in this array.

Step 3: Add CSS code below to your style file

.collapsible-header {
  background-color: rgb(8, 150, 206);
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-bottom: 1px solid #fff;
}
.active,
.collapsible-header:hover {
  background-color: rgb(14, 93, 158);
}
.collapsible-header:after {
  content: "\002B";
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
}
.collapsible-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}


csshtmljavascriptreact

© 2019 4codev

Created with love by Sil.