title: How to open multiple Accordion tabs in react-bootstrap?
body: <p>I am trying to open multiple Accordion if possible. Currently using <code>react-bootstrap</code> library.</p>
  <p>Following is my implementation :</p>
  <pre><code>&lt;Accordion&gt;
    {data.rows.map((item, index) =&gt; {
      return (
        &lt;Card
          style={{
            border: &quot;none&quot;,
            marginTop: &quot;1em&quot;,
            borderBottom: &quot;1px solid #f1f1f1&quot;,
          }}
        &gt;
          &lt;Card.Header
            style={{ background: &quot;transparent&quot;, padding: &quot;0.75em 0&quot; }}
          &gt;
            &lt;Row&gt;
              &lt;Col lg=&quot;10&quot; sm xs=&quot;9&quot; style={{ alignSelf: &quot;center&quot; }}&gt;
                &lt;p
                  className=&quot;cardtitle&quot;
                  style={{ fontWeight: &quot;600&quot; }}
                &gt;
                  {item.title}
                &lt;/p&gt;
              &lt;/Col&gt;
              &lt;Col style={{ textAlign: &quot;right&quot; }} xs sm&gt;
                {&quot; &quot;}
                &lt;ContextAwareToggle eventKey={index}&gt;
                  +
                &lt;/ContextAwareToggle&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Card.Header&gt;
          &lt;Accordion.Collapse eventKey={index}&gt;
            &lt;Card.Body&gt;
              &lt;p className=&quot;cardcontent&quot;&gt;{item.content}&lt;/p&gt;
            &lt;/Card.Body&gt;
          &lt;/Accordion.Collapse&gt;
        &lt;/Card&gt;
      );
    })}{&quot; &quot;}
  &lt;/Accordion&gt;
  
  ...
  
  
  function ContextAwareToggle({ children, eventKey, callback }) {
    const currentEventKey = useContext(Fifth);
  
    const decoratedOnClick = useAccordionToggle(
      eventKey,
      () =&gt; callback &amp;&amp; callback(eventKey)
    );
  
    const isCurrentEventKey = currentEventKey === eventKey;
    console.log(currentEventKey);
    return (
      &lt;button
        type=&quot;button&quot;
        className=&quot;accordianButton&quot;
        // style={{ backgroundColor: isCurrentEventKey ? &quot;pink&quot; : &quot;lavender&quot; }}
        style={{
          backgroundColor: &quot;transparent&quot;,
          fontSize: &quot;1.8em&quot;,
          fonWeight: &quot;700&quot;,
          border: &quot;transparent&quot;,
          color: &quot;green&quot;,
        }}
        onClick={decoratedOnClick}
      &gt;
        {isCurrentEventKey ? &quot;-&quot; : &quot;+&quot;}
      &lt;/button&gt;
    );
  }
  </code></pre>
  <p>Following is the link where I got my reference of code: <a href="https://react-bootstrap.github.io/components/accordion/" rel="noreferrer">https://react-bootstrap.github.io/components/accordion/</a></p>
  <p>Also, if not accordion then please suggest any other component. Been trying to create a FAQ template in my project.</p>
  <p>Thanks</p>