Displaying content when checkbox is checked

Displaying content when checkbox is checked

What is the best way to display additional content when only the first of a series of checkboxes is checked. For example, the form below includes four checkboxes. When the first is checked, a question with a textarea field needs to appear.
  1. <div class="checkbox">
  2.     <label><input name="answer" id="answer1" type="checkbox" value="Answer 1">Answer 1</label>
  3. </div>
  4. <div id="whyContainer" class="form-group hidden"> 
  5.     <div>
  6.         <label class="control-label" for="expertise">Why?</label>
  7.     </div>
  8.     <textarea class="form-control" cols="40" id="why" name="why" rows="10"></textarea>
  9. </div>

  11. <div class="checkbox">
  12.     <label><input name="answer" id="answer2" type="checkbox" value="Answer 2">Answer 2</label>
  13. </div>

  15. <div class="checkbox">
  16.     <label><input name="answer" id="answer3" type="checkbox" value="Answer 3">Answer 3</label>
  17. </div>

  19. <div class="checkbox">
  20.     <label><input name="answer" id="answer4" type="checkbox" value="Answer 4">Answer 4</label>
  21. </div>