Bootstrap accordion panel autofocus on form validation
<p>i still developing a piece of interface using Bootstrap3 accordion componend.
I've subdivided some fields of a from in different panels and i've added soem requirement in fields as mandatory.
Now if a user try to submit the form it auto switch to the respective panel.
I've found a way to change the panel heading color but i'm not able to find a way to change the chevron arrow like i normally did for manual navigation.</p>

<p>The single panel is coded like:</p>

<pre><code>    &lt;!-- DEFAULT  --&gt;
&lt;div class="panel panel-primary"&gt;
  &lt;div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1"&gt;
    &lt;h4 class="panel-title"&gt;
      &lt;a class="accordion-toggle"&gt;MAIN&lt;/a&gt;&lt;i class="indicator glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/i&gt;
    &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="collapse1" class="panel-collapse collapse in"&gt;
    &lt;div class="panel-body"&gt;
    &lt;fieldset&gt;          

    &lt;!-- Name input--&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="col-md-2 control-label" for="SiteName"&gt;Site Name&lt;/label&gt;  
      &lt;div class="col-md-6"&gt;
      &lt;input id="SiteName" name="SiteName" type="text" maxlength="50" placeholder="write a short title" class="form-control input-md" required="required" value=""&gt;
      &lt;span class="help-block"&gt;Please write the site name, keep it short&lt;/span&gt;  
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;/fieldset&gt;         
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- DEFAULT  --&gt;
</code></pre>

<p>I've made a simple jsfiddle with a working sample to take a look: <a href="https://jsfiddle.net/w1phk2fy/" rel="nofollow noreferrer">https://jsfiddle.net/w1phk2fy/</a></p>

<p>Thank you for any help </p>

<p>EDIT:
I found the answer by myself and post here the solution:</p>

<pre><code>// toggleChevron
            $(".panel-heading").find("i.indicator").removeClass("glyphicon-chevron-down");
            $(".panel-heading").find("i.indicator").addClass("glyphicon-chevron-right");
            $(this).closest(".panel-collapse").parent().find("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
</code></pre>

<p>here the working JSfiddle: <a href="https://jsfiddle.net/zfyhexxs/" rel="nofollow noreferrer">https://jsfiddle.net/zfyhexxs/</a></p>