JS - Accordion & Form

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id="myForm" class="form-horizontal" method="post" action="default.aspx">
  <div class="panel-group" id="accordion">
    <!-- 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  -->

    <!-- JSON-LD  -->
    <div class="panel panel-default">
      <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
        <h4 class="panel-title">
		  <a class="accordion-toggle">JSON-LD</a><i class="indicator glyphicon glyphicon-chevron-right pull-right"></i>
		</h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">
          <fieldset>

            <!-- NAME-->
            <div class="form-group">
           ...

JavaScript

// Change styles according to panels state

$('.panel').on('show.bs.collapse hide.bs.collapse', function() {

  $(this).toggleClass("panel-default panel-primary");
  $(this).find(".indicator").toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
})

// Initialize collapsibles

$('.collapse').collapse({
  toggle: false,
  parent: '#accordion'
});

// Bind panels behaviour to button

var inputs = $("#myForm input[required='required']");

$('#submitform').click(function() {

  inputs.each(function() {

    if ($(this).val() == "") {

      var current = $(this).closest(".panel-collapse");

      if (!current.hasClass("in")) {
        current.collapse("show");
      }

      return false;
    }
  });
});