Change header style for expanded Panel of Accordion in React Bootstrap
<p>For the clicked and active/expanded panel I would like to change the css style. That's because I would like to toggle an image arrow that points up or down inside the header of the panel.</p>

<p>I'm able to get the eventKey of the open panel, but I'm not able to reach the DOM element with the <em>panel-heading</em> css class.</p>

<p>What do you suggest?</p>

<p>Thanks</p>

<p>Code below</p>

<pre><code>&lt;Accordion onSelect={this.handleSelect} &gt;
  &lt;Panel header="Collapsible Group Item #1" eventKey="1"&gt;
    Ad vegan
  &lt;/Panel&gt;
  &lt;Panel header="Collapsible Group Item #2" eventKey="2"&gt;
    Cliche docet
  &lt;/Panel&gt;
&lt;/Accordion&gt;
</code></pre>

<p>That becomes</p>

<pre><code>    &lt;div role="tablist" class="panel-group"&gt;
        &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading"&gt;
                &lt;h4 role="presentation" class="panel-title"&gt;&lt;a role="tab" aria-expanded="false" aria-selected="false"&gt;Collapsible Group Item #1&lt;/a&gt;&lt;/h4&gt;&lt;/div&gt;
            &lt;div role="tabpanel" class="panel-collapse collapse" aria-hidden="true" style="height: 0px;"&gt;
                &lt;div class="panel-body"&gt;
                    &lt;!-- react-text: 36 --&gt;Ad vegan
                    &lt;!-- /react-text --&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading"&gt;
                &lt;h4 role="presentation" class="panel-title"&gt;&lt;a role="tab" aria-expanded="false" aria-selected="false"&gt;Collapsible Group Item #2&lt;/a&gt;&lt;/h4&gt;&lt;/div&gt;
            &lt;div role="tabpanel" class="panel-collapse collapse" aria-hidden="true" style="height: 0px;"&gt;
                &lt;div class="panel-body"&gt;
                    &lt;!-- react-text: 43 --&gt;Cliche docet
                    &lt;!-- /react-text --&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>