$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
  $('#answerBox').hide();
  $('#answerBox1').hide();
  $('#answerBox2').hide();
  $('#answerBox3').hide();
  $('#answerBox4').hide();
  $('#answerBox5').hide();
  $('#answerBox6').hide();
  $('#answerBox7').hide();
  
 // shows and hides and toggles the slickbox on click  
  $('#slick-slidetoggle').click(function() {
    $('#answerBox').slideToggle(400);
    return false;
  });
  $('#slick-slidetoggle1').click(function() {
    $('#answerBox1').slideToggle(400);
    return false;
  });
  $('#slick-slidetoggle2').click(function() {
    $('#answerBox2').slideToggle(400);
    return false;
  });
  $('#slick-slidetoggle3').click(function() {
    $('#answerBox3').slideToggle(400);
    return false;
  });
  $('#slick-slidetoggle4').click(function() {
    $('#answerBox4').slideToggle(400);
    return false;
  });
  $('#slick-slidetoggle5').click(function() {
    $('#answerBox5').slideToggle(400);
    return false;
  });
  $('#slick-slidetoggle6').click(function() {
    $('#answerBox6').slideToggle(400);
    return false;
  });
  $('#slick-slidetoggle7').click(function() {
    $('#answerBox7').slideToggle(400);
    return false;
  });
});