Create collapse expand list in react

share link

by vsasikalabe dot icon Updated: Feb 21, 2023

technology logo
technology logo

Solution Kit Solution Kit  

The tabs, progress bars, charts, draggable elements, and collapsible components are present in modern web applications. We are using here collapsible components, which have two states: collapsed and expanded. A collapsible component typically shows the titles and doesn't show its full content only when it's in the collapsed state. Users can see the full content by expanding it with a mouse click or screen tap. Frontend developers prefer to use collapsible components to create editable forms. 


To show and hide content, we are using the collapse component. To map specific elements, toggle buttons or anchors are used as triggers. Collapsing an element used to animate the height from its current value to 0. The constructor method initializes an object's state in a class. During the object creation in a class, it is automatically called. We start by adding a property to the state object, a list dynamically rendered in React. We can include that property with an array of strings. Now to render each list item dynamically, we want to move to the render() method. To prevent further propagation of the current event in the capturing and bubbling phases, they used the stopPropagation() method. It does not, regardless, prevent any default behaviors, and clicks on links are still processed. 

Highlighted features of react-collapsed 

  • Freedom to customize styles 
  • Simple, CSS-based animations 
  • Easy setup and flexibility 

When a button is clicked in a collapsible, we can see details displayed. Adding properties and details to our component in React can be done. Props (properties) are arguments passed into React components and used to send data from the mother component to its children. The CSS property is used in auto. 


Here is an example of how to create a collapse and expand the list in Reactjs: 

Preview of the output that you will get on running this code from your IDE.

Code:

In this solution we use the React library.

class App extends Component {
  constructor() {
    super();
    this.state = {
        activeCollapse: 'circulars'
    };
  }

  handleExpandCollaps = (name) => {
    if (this.state.activeCollapse === name) {
        this.setState({ activeCollapse: '' })
    } else {
        this.setState({ activeCollapse: name })
    }
  }

  moreInfoClick = (e) => {
    e.stopPropagation();
    console.log("clicked");
  }
  render() {
    return (
      <div>
        <div className="sidebar-nav">
          <div className="sidebar-nav-menu">

            <div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "circulars" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("circulars")} data-id="circulars" >
              <div className="sidebar-nav-menu-item-head">
                <span className="sidebar-nav-menu-item-head-title">Circulars</span>
                <span className="sidebar-nav-menu-item-head-help">
                  <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
                </span>
              </div>
              <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
            </div>

            <div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "specifications" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("specifications")} data-id="specifications">
              <div className="sidebar-nav-menu-item-head">
                <span className="sidebar-nav-menu-item-head-title">Specifications</span>
                <span className="sidebar-nav-menu-item-head-help">
                  <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
                </span>
              </div>
              <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
            </div>


            <div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "wo" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("wo")} data-id="wo">
              <div className="sidebar-nav-menu-item-head">
                <span className="sidebar-nav-menu-item-head-title">Work Orders</span>
                <span className="sidebar-nav-menu-item-head-help">
                  <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
                </span>
              </div>
              <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
            </div>

          </div>
        </div>
      </div>
    );
  }
}

Instructions

Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Open the folder in IDE.
  5. Copy the code using "copy" button above and paste it in App.js file(remove the earlier code from App.js).
  6. Import React,React-dom and style.css.
  7. Add render(<App />, document.getElementById('root')),export default App to the end.
  8. Open the terminal from IDE.
  9. npm start to run the file.


You can also refer this url DEMO for getting the above output.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.


I found this code snippet by searching for Create collapse expand list in react in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. The solution is tested on Nodejs 16.14.2 version.
  3. react 18.2.0 version.


Using this solution, we are able to Create collapse expand list in react with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to Create collapse expand list in react.

Dependent Libraries

create-react-appby facebook

JavaScript doticonstar image 100082 doticonVersion:v5.0.1doticon
License: Permissive (MIT)

Set up a modern web app by running one command.

Support
    Quality
      Security
        License
          Reuse

            create-react-appby facebook

            JavaScript doticon star image 100082 doticonVersion:v5.0.1doticon License: Permissive (MIT)

            Set up a modern web app by running one command.
            Support
              Quality
                Security
                  License
                    Reuse

                      You can search for any dependent library on kandi like react.

                      Support

                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page.

                      See similar Kits and Libraries