JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
  <form action="/update" id="formwrite">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title va-middle">Account Settings
						<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
						</h4>
        </div>
        <div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel panel-default">
            <div class="row fieldpos">
              <fieldset class="form-group textwide">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" placeholder="Enter Email" required>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title va-middle">Other Settings
								<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeTwo" aria-expanded="true" aria-controls="collaspeTwo">
								</h4>
      </div>
      <div id="collaspeTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel panel-default">
          <div class="row fieldpos">
            <fieldset class="form-group textwide">
              <label for="group">Test</label>
              <input type="text" class="form-control" id="group"...

CSS

.container {
  width: 75%;
}

.panel-heading {
  background-color: #D9DBDE;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 0;
}

.panel-title {
  font-size: 21px;
  display: block;
  width: 100%;
  color: #4F5858;
  line-height: 1.3;
  font-weight: normal;
}

.collapse-icon {
  float: right;
}

.fieldpos {
  margin-left: 0px;
  width: 60%;
}

JavaScript

// save the accordion in a variable as you'll need it later
$accordion = $("#accordion").accordion();

// when the submit is clicked
$("#formwrite input[type='submit']").on("click", function(event) {

  // traverse all the required elements looking for an empty one
  $("#formwrite input[required='required']").each(function() {

    // if the value is empty, that means that is invalid
    if ($(this).val() == "") {

      // find the index of the closest h3 (divide by 2 because jQuery UI accordion goes in pairs h3-div. A bit hacky, sorry)
      var item = $(this).closest(".ui-accordion-content").prev().index() / 2;

      // open that accordion section that contains the required field
      $accordion.accordion("option", "active", item);

      // stop scrolling through the required elements
      return false;
    }
  });
});