title: How to make nested Accordion?
body: <p>In semantic_ui-react library exists component <a href="https://react.semantic-ui.com/modules/accordion#accordion-example-nested" rel="nofollow noreferrer">Accordion</a>. There are some examples, but I have to make nested accordion, which has structure:</p>
  
  <pre><code>-accordion:
      -sub_accordion1
      -sub_accordion2
      -sub_accordion3
  </code></pre>
  
  <p>I saw there is example of nested accordion with panels, but I don't want to put accordions into the panels. I tried so:</p>
  
  <pre><code>export default class AccordionExampleStandard extends Component {
    state = { activeIndex: 0 }
  
    handleClick = (e, titleProps) =&gt; {
      const { index } = titleProps
      const { activeIndex } = this.state
      const newIndex = activeIndex === index ? -1 : index
  
      this.setState({ activeIndex: newIndex })
    }
  
    render() {
      const { activeIndex } = this.state
  
      return (
        &lt;Accordion&gt;
          &lt;Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}&gt;
            &lt;Icon name='dropdown' /&gt;
            What is a dog?
          &lt;/Accordion.Title&gt;
          &lt;Accordion.Content active={activeIndex === 0}&gt;
            &lt;Accordion.Title active={activeIndex === 1} index={1} onClick={this.handleClick}&gt;
            &lt;Icon name='dropdown' /&gt;
            What kinds of dogs are there?
          &lt;/Accordion.Title&gt;
          &lt;Accordion.Content active={activeIndex === 1}&gt;
            Content1
          &lt;/Accordion.Content&gt;
  
          &lt;Accordion.Title active={activeIndex === 2} index={2} onClick={this.handleClick}&gt;
            &lt;Icon name='dropdown' /&gt;
            How do you acquire a dog?
          &lt;/Accordion.Title&gt;
          &lt;Accordion.Content active={activeIndex === 2}&gt;
            Content2
          &lt;/Accordion.Content&gt;
  &lt;Accordion.Title active={activeIndex === 3} index={3} onClick={this.handleClick}&gt;
            &lt;Icon name='dropdown' /&gt;
            What kinds of dogs are there?
          &lt;/Accordion.Title&gt;
          &lt;Accordion.Content active={activeIndex === 3}&gt;
           Content3
          &lt;/Accordion.Content&gt;
          &lt;/Accordion.Content&gt;
        &lt;/Accordion&gt;
      )
    }
  }
  </code></pre>
  
  <p>It renders component, but I can collapse only main accordion and can't collapse it's children. How can I perform this feature?</p>