Bootstrap Akkordeon Panel Autofokus auf Formular-Validierung

Question

Ich entwickle immer noch ein Stück Schnittstelle mit Bootstrap3 Akkordeon-Komponente. Ich habe einige Felder von einem in verschiedenen Panels unterteilt und ich habe soem Anforderung in Feldern als obligatorisch hinzugefügt. Wenn nun ein Benutzer versucht, das Formular zu senden, wechseln Sie automatisch zum entsprechenden Panel. Ich habe einen Weg gefunden, um die Farbe der Panelüberschrift zu ändern, aber ich bin nicht in der Lage, einen Weg zu finden, den Chevronpfeil zu ändern, wie ich normalerweise für die manuelle Navigation tat.

Die einzelne Platte wird wie codiert:

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

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

    </fieldset>   
    </div> 
    </div> 
</div> 
<!-- DEFAULT --> 

Ich habe eine einfache jsfiddle mit einer Arbeitsprobe einen Blick zu nehmen: https://jsfiddle.net/w1phk2fy/

Danke für jede Hilfe

EDIT: Ich fand die Antwort von mir selbst und poste hier die Lösung:

// 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'); 

hier die Arbeits JSfiddle: https://jsfiddle.net/zfyhexxs/

Answer 1

das Akkordeon Um zu steuern, verwenden Sie die Methoden:

.collapse('hide'); 
.collapse('show'); 

Auf diese Weise wird der Rahmen um den Zustand und Klassen jeder Platte für Sie verwalten.

In Ihrem Code, die Farben und die Sparrenpfeile sind nur dann aktualisiert, wenn der Benutzer auf die Schaltfläche klickt, so dass Sie diese Änderungen an den Ereignissen hide.bs.collapse und show.bs.collapse binden müssen, wie Sie taten zunächst mit der toggleChevron Funktion. Sie müssen auch einige Redundanzen entfernen und ein paar andere Verbesserungen hinzuzufügen, so überprüfen Sie die aktualisierte Geige:

JSFIDDLE