CODEWITHSUNDEEP
jqueryformsvalidationtwitter-bootstrap-3bootstrap-accordion
Hart
Hart

Reputation: 186

Bootstrap accordion panel autofocus on form validation

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.

The single panel is coded like:

    <!-- 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  -->

I've made a simple jsfiddle with a working sample to take a look: https://jsfiddle.net/w1phk2fy/

Thank you for any help

EDIT: I found the answer by myself and post here the solution:

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

here the working JSfiddle: https://jsfiddle.net/zfyhexxs/

Upvotes: 2

Views: 4025

Answers (1)

R.Costa
R.Costa

Reputation: 1393

To control the accordion, use the methods:

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

This way, the framework will manage the state and classes of each panel for you.

In your code, the colours and the chevron arrows are only updated when the user clicks the button, so you must bind these changes to the events hide.bs.collapse and show.bs.collapse, as you were doing initially with the toggleChevron function. You also need to remove some redundancies and add a few other tweaks, so check the updated fiddle:

JSFIDDLE

Upvotes: 4

Related Questions