title: How to have multiple accordions open with semantic UI react?
body: <p>I am trying to use a semantic UI accordion containing multiple entries and allow more than one entry to be open at once; each entry has a title portion containing an icon with a popup attached and a content area containing a textarea.</p>
  
  <p>I would like to be able to have both accordions open at the same time which is apparently supported by using the <code>exclusive={false}</code> prop when making the  accordion element as described in the <a href="https://react.semantic-ui.com/modules/accordion/#usage-exclusive" rel="nofollow noreferrer">documentation here</a></p>
  
  <p>But that example looks to be using an array of objects with content that is a string, not other react/html/jsx elements (in my case it is semantic ui icons, popups and textareas). That array of objects is passed in to the accordion's <code>panel</code> prop. </p>
  
  <p>And I am unfamiliar with what the semantic ui react accordion requires to function correctly with keeping track of indices and other stuff, I am not sure what else I need to configure or if this is possible with the semantic ui component as is.  </p>
  
  <p>I essentially copied <a href="https://react.semantic-ui.com/modules/accordion/#types-standard" rel="nofollow noreferrer">this example</a> and use an active index and an onclick handler which switches the active index in the component react state.  </p>
  
  <p>Here is a snippet of the accordion and onclick handler and react app state:</p>
  
  <pre><code>class FileUpload extends Component {
  
   // other stuff omitted 
  
    constructor(props) {
      super(props);
  
      this.state = {
        activeAccordionIndex: -1
      };
  
    handleAccordionClick = (e, titleProps) =&gt; {
       const { index } = titleProps;
       const { activeAccordionIndex } = this.state;
       const newIndex = activeAccordionIndex === index ? -1 : index;
  
       this.setState({
         activeAccordionIndex: newIndex
       })
     }
  
   // I'm using a small helper function to create the accordion and invoke it in 
   // the render method, just one item for brevity; the other entries are pretty 
   // much the same
  
  getAccordionInputs() {
  
       const { activeAccordionIndex } = this.state;
  
       let accordionContent = (
        &lt;Accordion fluid exclusive={false}&gt;
           &lt;Accordion.Title
             className="file-upload-ordinal-accord-title"
             active={activeAccordionIndex === 0}
             index={0}
             onClick={this.handleAccordionClick}
            &gt;
             &lt;Icon name='dropdown' /&gt;
             Enter Ordinal Features
             &lt;Popup
               on="click"
               position="right center"
               header="Ordinal Features Help"
               content={
                 &lt;div className="content"&gt;
                   &lt;p&gt;Ordinal Features help description&lt;/p&gt;
                 &lt;/div&gt;
               }
               trigger={
                 &lt;Icon
                   className="file-upload-ordinal-help-icon"
                   inverted
                   size="large"
                   color="orange"
                   name="info circle"
                 /&gt;
               }
             /&gt;
           &lt;/Accordion.Title&gt;
           &lt;Accordion.Content
              active={activeAccordionIndex === 0}
            &gt;
             &lt;textarea
               className="file-upload-ordinal-text-area"
               id="ordinal_features_text_area_input"
               label="Ordinal Features"
               placeholder={"{\"ord_feat_1\": [\"MALE\", \"FEMALE\"], \"ord_feat_2\": [\"FIRST\", \"SECOND\", \"THIRD\"]}"}
               onChange={this.handleOrdinalFeatures}
             /&gt;
           &lt;/Accordion.Content&gt;
         &lt;/Accordion&gt;
       )
       return accordionContent;
     }
  
    }
  
  </code></pre>
  
  <p>I don't know how to set this up to allow multiple accordions open at once with content that is not a string. Is this possible with the semantic ui accordion? Or do I need to find an alternative solution and/or make the piece with the desired behavior by hand?</p>