Collapse text

by Brad Patton

HTML

<div id="sgE-2842399-1-5-box" class="sg-question sg-type-textbox sg-cc-hook">
	<input id="sgE-2842399-1-5-meta" name="sgE-2842399-1-5-meta" value="hidden=false&amp;required=false" type="hidden">
	<input id="sgE-2842399-1-5-time" name="sgE-2842399-1-5-time" value="" type="hidden">
		<div class="sg-cc-badge">0</div>
		<div class="sg-question-title">
			<label for="sgE-2842399-1-5-element">
			Start Date		</label>
      <div class="sg-question-description sg-question-description-below"><span class="hideShow">+</span><span class="details">This is a starting date in time and space.</span></div>	</div>
		<div class="sg-question-options">
	
	<div class="sg-control-text sg-control-date">

		<input id="sgE-2842399-1-5-element" name="sgE-2842399-1-5" title="Start Date" class="sg-input sg-input-text sg-validation-date" value="" type="text">			<span id="sgE-2842399-1-5Trigger" class="icon-calendar"><span>Calendar</span></span>
				</div>
			<!-- /sg-question-options -->
		</div>
	
		<!-- /sge-box -->
</div>

JavaScript

$(document).ready(function(){
	$('.details').hide();
  $('.hideShow').css('cursor','pointer');
  
  $(".hideShow").click(function() {
  	var label = '+';
    if ($(this).html() == '+') label = '-';
  	$(this).html(label);
  	$(this).next().slideToggle();
  });
});