Skip to content
Advertisement

How to collapse/expand accordion in a Q&A form after input selection

Not sure if that’s the correct vocabulary, but here’s what I’m trying accomplish. I’m working with a team on this big multi-page Q&A application, my task is make one particular page use the least amount of screen real estate as possible.

I’m using an accordion, each one has a question inside, and next to each question is a question mark which changes to check mark after the question is answered.

I have all that already completed which you can see here: 

$(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_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 !important;
}

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

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

.plusminus {
  float: left;
  margin-right: 10px;
}
<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">
    
    <div class="row">
      <div class="col-xs-12 col-md-12 col-lg-6">
        <div class="accordion_head"><span class="updown">▼</span> What type of sensors are required?
          <span class="glyphicon glyphicon-ok check-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 class="accordion_head"><span class="plusminus">▼</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>
        </div>

        <div class="accordion_head"><span class="updown">▼</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 class="accordion_head"><span class="updown">▼</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 class="accordion_head"><span class="updown">▼</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>
        </div> 

        <div class="accordion_head"><span class="updown">▼</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>
          </div>
      </div><!-- end .col-xs-6 -->
  
    <div class="col-xs-12 col-md-12 col-lg-6">
      
      <div class="accordion_head"><span class="updown">▼</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>
      </div>
      
      <div class="accordion_head"><span class="updown">▼</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>
      </div>
      
      <div class="accordion_head"><span class="updown">▼</span> Maintain switch ganging configurations? 
        <span class="question-mark" aria-hidden="true">?</span> 
      </div>
      
      <div class="accordion_body" style="display: none;">
        <input type="checkbox" name="switch ganging" value="Yes"> Yes<br>
        <input type="checkbox" name="switch ganging" value="No"> No<br>
      </div>   
      
      <div class="accordion_head"><span class="updown">▼</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>
      </div> 
      
      <div class="accordion_head"><span class="updown">▼</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>
      </div>       
      
    </div><!-- end .col-xs-6 -->
  </div><!-- end .accordion_container -->
</form>

Here’s where I’m stuck.

Once I select an answer for a question, I want the accordion to collapse to the next question, of course, it will only apply to single answer fields.

  1. How do I expand the next question after I select an answer for the previous question?
  2. How do I change the question mark to a check mark after I select an answer?

Advertisement

Answer

You can surround each “accordion” with a div (i gave it a class accordion_main)

add the check mark classes and remove the question class.

The html will look like this:

<div class="accordion_main">
                    <div class="accordion_head"><span class="updown">▼</span> What type of sensors are required? <span class="glyphicon glyphicon-ok check-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>

and js:

$(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));
});
});

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();
            }
        }

    }
}

working fiddle

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement