Collapse current div expand next div on button click

Question

I'm working on part of a large Q&A form, there is an accordion on one of the pages which you can view here.

http://jsfiddle.net/Covanant/rxpdz2q9/

The way the form works is that when you answer a question in one accordion, it collapses then expands the next accordion, with the exception of checkboxes since those can have multiple selections.

I have a button called "Next" that's with the checkboxes, by default the button will be hidden, what I want to do is once an option is selected for the checkboxes the "Next" button will fade in, once that button is clicked it collapses that current accordion and expands the next.

Right now all that's working is the click that collapses the current element.

Code below.

$(document).ready(function() {

  $(".accordion_head").click(function() {
    if ($('.accordion_body').is(':visible')) {
      $(".accordion_body").slideUp(300);
      $(".updown").text('\u25BC');
    }
    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideUp(300);
      $(this).children(".updown").text('\u25BC');
    } else {
      $(this).next(".accordion_body").slideDown(300);
      $(this).children(".updown").text('\u25B2');
    }
  });
  

  });
  $(".accordion_body select").change(function() {
    nextQuestion($(this));
  });
  $(".accordion_body input").change(function() {

    nextQuestion($(this));

  });

  $(".next-button").click(function() {
    if ($('.accordion_body').is(':visible')) {
      $(".accordion_body").slideUp(300);
      $(".updown").text('\u25BC');
    }
    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideDown(300);
      $(this).children(".updown").text('\u25BC');
    } else {
      $(this).next(".accordion_body").slideDown(300);
      $(this).children(".updown").text('\u25B2');
    }
  });

function nextQuestion(currentQuestion) {
  var parentEle = currentQuestion.parents(".accordion_main");
  if (parentEle.next()) {
    parentEle.find(".question-mark").addClass("glyphicon glyphicon-ok check-mark").removeClass("question-mark").text("");
    if (currentQuestion.attr('type') != 'checkbox') {
      if (parentEle.next().find(".accordion_head").length > 0) {
        parentEle.next().find(".accordion_head").click();
      } else {
        //there is no next--> try to go to the next colum
        parentEle.parent("div").next("div").find(".accordion_head").first().click();
      }
    }

  }

}

.accordion_container {
  width: 100%;
  padding: 1em;
}

.accordion_head {
  background-color: #FFF;
  color: #555;
  cursor: pointer;
  font-family: arial;
  font-size: 14px;
  margin: 10px 0 0px 0px;
  padding: 10px 11px;
  font-weight: bold;
  border: 1px solid #ddd;
}

.accordion_body {
  background: #EEE;
  padding: 1em;
}

.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.check-mark,
.question-mark {
  border-style: solid;
  border-width: 1px;
  border-radius: 50%;
  float: right;
  height: 28px;
  line-height: 16px;
  padding: 5px;
  position: relative;
  width: 28px;
  text-align: center;
  top: -4px;
}

.check-mark {
  border-color: #c4db30;
  color: #c4db30;
}

.question-mark {
  border-color: #086cff;
  color: #086cff;
  font-size: 1.3em;
}

.plusminus {
  float: left;
  margin-right: 10px;
}

.next-button {
  /* display: none; */
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<form action="demo_form.aspx" method="get">
  <div class="accordion_container">
    <p>Answer all question below to complete the order request</p>
    <div class="row">
      <div class="col-xs-12 col-md-6 col-lg-6">
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> What type of sensors are required? <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: block;">
            <select>
              <option value="sensors">None Selected</option>
              <option value="sensors">Photocell On</option>
              <option value="sensors">Off Control Only</option>
              <option value="sensors">Photocell On / Off Control Only</option>
            </select>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="plusminus">&#9660;</span> Please select if the below products are present / required. <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <div class="row">
              <div class="col-xs-6">
                <input type="checkbox" name="products" value="nWifi">nWifi (nLight)
                <br>
                <input type="checkbox" name="products" value="nLightFixtures">nLightFixtures
                <br>
                <input type="checkbox" name="products" value="xCella">xCella (LC&D)
                <br>
              </div>
              <div class="col-xs-6">
                <input type="checkbox" name="products" value="DaylightHarvesting">Daylight Harvesting
                <br>
                <input type="checkbox" name="products" value="xPoint">xPoint (LC&D)
                <br>
                <input type="checkbox" name="products" value="GraphicsSoftare">Graphics Sofware
                <br>
              </div>
            </div>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> What type of construction is this? <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="radio" name="contruction" value="NewConstruction" />New Construction
            <br>
            <input type="radio" name="construction" value="Retrofit" />Retrofit
            <br>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Scope of work <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="radio" name="work" value="AllAreas" />New Construction
            <br>
            <input type="radio" name="work" value="Retrofit" />Retrofit
            <br>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> BMS Integration <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <div class="row">
              <div class="col-xs-6">
                <input type="checkbox" name="bms-integration" value="BACnetIP">BACnet IP
                <br>
                <input type="checkbox" name="bms-integration" value="BACnetMSTP">BACnet MSTP
                <br>
                <input type="checkbox" name="bms-integration" value="Modbus">Modbus
                <br>
              </div>
              <div class="col-xs-6">
                <input type="checkbox" name="bms-integration" value="LonWorks">LonWorks
                <br>
                <input type="checkbox" name="bms-integration" value="Metasys">Metasys
                <br>
                <input type="checkbox" name="bms-integration" value="Other">Other
                <br>
              </div>
            </div>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Dimming Information <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="dimming-information" value="TenV">0-10V
            <br>
            <input type="checkbox" name="dimming-information" value="DALI">DALI
            <br>
            <input type="checkbox" name="dimming-information" value="TwoW">2W
            <br>
            <input type="checkbox" name="dimming-information" value="threeW">3W
            <br>
            <input type="checkbox" name="dimming-information" value="Other">Other
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
      </div>
      <!-- end .col-xs-6 -->
      <div class="col-xs-12 col-md-6 col-lg-6">
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Voltages Used <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="voltage" value="volt120">120 / 277
            <br>
            <input type="checkbox" name="voltage" value="volt208">208
            <br>
            <input type="checkbox" name="voltage" value="volt347">347
            <br>
            <input type="checkbox" name="voltage" value="volt480">480
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Interfaces <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="interfaces" value="BAS">BAS / HVAC
            <br>
            <input type="checkbox" name="interfaces" value="AV">A/V System
            <br>
            <input type="checkbox" name="interfaces" value="Shades">Shades
            <br>
            <input type="checkbox" name="interfaces" value="LightingControlSystems">Other Lighting Control Systems
            <br>
            <input type="checkbox" name="interfaces" value="Other">Other
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Maintain switch ganging configurations? <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="radio" name="switch ganging" value="Yes">Yes
            <br>
            <input type="radio" name="switch ganging" value="No">No
            <br>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Emergency Design <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="emergency design" value="Generator">Generator
            <br>
            <input type="checkbox" name="emergency design" value="Battery">Battery
            <br>
            <input type="checkbox" name="emergency design" value="GTD">GTD
            <br>
            <input type="checkbox" name="emergency design" value="Shunting Required">Shunting Required
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
        <div class="accordion_main">
          <div class="accordion_head"><span class="updown">&#9660;</span> Energy Code Compliance (Also Provide Version if Selected) <span class="question-mark" aria-hidden="true">?</span>
          </div>
          <div class="accordion_body" style="display: none;">
            <input type="checkbox" name="energy code compliance" value="IECC">IECC
            <br>
            <input type="checkbox" name="energy code compliance" value="ASHRAE">ASHRAE 90.1
            <br>
            <input type="checkbox" name="energy code compliance" value="Title24">Title 24
            <br>
            <input type="checkbox" name="energy code compliance" value="Other">Other
            <br>
            <button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
          </div>
        </div>
      </div>
      <!-- end .col-xs-6 -->
    </div>
    <!-- end .accordion_container -->
</form>

Answer 1

Why not just use this:

$(".next-button").click(function () {
      nextQuestion($(this));
});