title: How to open a particular accordion based click event in reactjs and autoclose remaining accordion?
body: <p><strong>I want to open a particular Section on clicking on that. How to do that by using click event? And also auto close the remaining accordion if I click on another accordion. Here is my code.</strong></p>
  
  <p><strong><em>Accordion Component</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  import Section from './section';
  
  class Accordion extends Component {
  
      constructor(props) {
          super(props);
          this.handleClick = this.handleClick.bind(this);
          this.state = {
              open: false,
              headingClassName: 'accordion-heading',
              className: 'accordion-content accordion-close',
              Label: 'label-close',
              icon: "+",
              selectedItem: null,
          };
      }
  
      handleClick = () =&gt; {
  
          const open = this.state.open;
          if (open) {
              this.setState({
                  open: false,
                  className: "accordion-content accordion-close",
                  headingClassName: "accordion-heading",
                  Label: 'label-close',
                  icon: "+",
  
              })
          } else {
              this.setState({
                  open: true,
                  className: "accordion-content accordion-open",
                  headingClassName: "accordion-heading clicked",
                  Label: 'label-open',
                  icon: "-",
              })
          }
      }
  
      render() {
          return (
              &lt;div className="accordion-container"&gt;
                  &lt;h1&gt;Accordian Component&lt;/h1&gt;
  </code></pre>
  
  <blockquote>
    <p>How to pass id as parameter in each section in onClick event to open
    particular accordion and to autoclose remaining.</p>
  </blockquote>
  
  <pre><code>     &lt;Section&gt;
                      &lt;div className={this.state.headingClassName} onClick={this.handleClick} id="1"&gt;
                          &lt;h3&gt;One&lt;/h3&gt; &lt;label className={this.state.Label}&gt;{this.state.icon}&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div className={this.state.className}&gt;
                          &lt;p&gt;This is paragraph&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/Section&gt;
                  &lt;Section&gt;
                      &lt;div className={this.state.headingClassName} onClick={this.handleClick} id="2"&gt;
                          &lt;h3&gt;Two&lt;/h3&gt; &lt;label className={this.state.Label}&gt;{this.state.icon}&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div className={this.state.className}&gt;
                          &lt;p&gt;This is paragraph&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/Section&gt;
                  &lt;Section&gt;
                      &lt;div className={this.state.headingClassName} onClick={this.handleClick} id="3"&gt;
                          &lt;h3&gt;Three&lt;/h3&gt; &lt;label className={this.state.Label}&gt;{this.state.icon}&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div className={this.state.className}&gt;
                          &lt;p&gt;This is paragraph&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/Section&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Accordion;
  </code></pre>
  
  <p><strong><em>Section Component</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Section extends Component {
  
      render() {
          return (
              &lt;div className="parent-accordion"&gt; 
                  {this.props.children}           
              &lt;/div&gt;
          );
      }
  }
  
  export default Section;
  </code></pre>
  
  <p><strong><em>CSS</em></strong></p>
  
  <pre><code>body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  
  .accordion-container {
    margin: auto;
    width: 700px;
  }
  
  .accordion-container h1 {
    color: #0000007a;
    text-align: center;
    font-family: sans-serif;
  }
  
  .parent-accordion {
    width: 100%;
    border: 1.5px solid #00000017;
  }
  
  .accordion-heading {
    padding: 5px 5px;
    background-color: #e2e2e254;
    cursor: pointer;
    text-transform: capitalize;
    /* font-size: 17px; */
    /* font-weight: 600; */
    color: #2b2b41;
    /* font-family: sans-serif; */
    transition: background-color 1s;
  }
  
  .accordion-heading:hover {
    background-color: #000000c7;
    color: white;
  </code></pre>