title: How to create collapse expand list in react
body: <p>I try to create a collapse and expand side menu in <code>React (v 16.5)</code> with the following criteria -</p>
  
  <p>On page load first item (Circulars) will be in expanded view. Any of one item can expand at a time, like, if user clicks on the second item (Specifications), the first item will collapse. I also want some CSS animation during collapse/expand transaction , like smoothly down/up the body section of each item and change the arrow icons. My approach is to add/remove a CSS class on each item (<code>sidebar-nav-menu-item</code>) dynamically, like -</p>
  
  <pre><code>sidebar-nav-menu-item item-active
  </code></pre>
  
  <p>So, when a item was in expanded view it should be like above class and remove <code>item-active</code> when its in collapse view. By default, the body <code>div</code>s (sidebar-nav-menu-item-body) should be hidden through CSS when the item in a collapse mode.</p>
  
  <pre><code>import React, { Component } from 'react';
  
  className SidebarNavs extends React.Component{
      constructor(props) {
         super(props);
      }
  
      render() {
          return(
              &lt;div className="sidebar-nav"&gt;
                  &lt;div className="sidebar-nav-menu"&gt;
  
                      &lt;div className="sidebar-nav-menu-item" data-id="circulars"&gt;
                          &lt;div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}&gt;
                              &lt;div className="sidebar-nav-menu-item-head-title"&gt;Circulars&lt;/div&gt;
                              &lt;div className="sidebar-nav-menu-item-head-help"&gt;
                                  &lt;button type="button" className="btn-help" onClick={this.moreInfoClick}&gt;View more info&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div className="sidebar-nav-menu-item-head-icon"&gt;
                                  &lt;i className="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="sidebar-nav-menu-item-body"&gt;BODY CONTENT HERE&lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div className="sidebar-nav-menu-item" data-id="specifications"&gt;
                          &lt;div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}&gt;
                              &lt;div className="sidebar-nav-menu-item-head-title"&gt;Specifications&lt;/div&gt;
                              &lt;div className="sidebar-nav-menu-item-head-help"&gt;
                                  &lt;button type="button" className="btn-help" onClick={this.moreInfoClick}&gt;View more info&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div className="sidebar-nav-menu-item-head-icon"&gt;
                                  &lt;i className="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="sidebar-nav-menu-item-body"&gt;BODY CONTENT HERE&lt;/div&gt;
                      &lt;/div&gt;
  
  
                      &lt;div className="sidebar-nav-menu-item"  data-id="wo"&gt;
                          &lt;div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}&gt;
                              &lt;div className="sidebar-nav-menu-item-head-title"&gt;Work Orders&lt;/div&gt;
                              &lt;div className="sidebar-nav-menu-item-head-help"&gt;
                                  &lt;button type="button" className="btn-help" onClick={this.moreInfoClick}&gt;View more info&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div className="sidebar-nav-menu-item-head-icon"&gt;
                                  &lt;i className="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="sidebar-nav-menu-item-body"&gt;BODY CONTENT HERE&lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default SidebarNavs;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.sidebar-nav-menu-item{
     display:block;
  }
  .sidebar-nav-menu-item-body{
     display:none;
  }
  .sidebar-nav-menu-item.item-active .sidebar-nav-menu-item-body{
     display:block;
  }
  </code></pre>