On-Click Drop Downs

<div class="optionBox darkenbar goldenbar"><span class="optionBox-title"><strong>Dark Drop Down</strong></span>
<span class="optionBox-arrow"><i class="fa fa-arrow-circle-down Societies"></i></span></div>

<div class="hidContent">
<p>High quality hidden content.</p>
</div>

<div class="optionBox darkenbar"><span class="optionBox-title"><strong>Dark Drop Down</strong></span>
<span class="optionBox-arrow"><i class="fa fa-arrow-circle-down Societies"></i></span></div>

<div class="hidContent">
<p>High quality hidden content.</p>
</div>

<div class="optionBox"><span class="optionBox-title">Light Drop Down (Default)</span>
<span class="optionBox-arrow"><i class="fa fa-arrow-circle-down"></i></span></div>

<div class="hidContent">
<p>High quality hidden content.</p>
</div>

<label>Military Experience?</label>
<div><input name="Military" onclick="showOption('military','yes')" type="radio" value="Yes" /> Yes
<input name="Military" onclick="showOption('military','no')" type="radio" value="No" /> No</div>

<div class="hidContent" id="military">

<table><tbody>
<tr><td>Branch:</td>
<td><input name="Miltary Branch" size="24" type="text" /></td></tr>
<tr><td>Dates:</td>
<td><input name="Service Dates" size="24" type="text" /></td></tr>
<tr><td><p>(please send a <i>copy </i> of your DD214 )</p></td>
</tr></tbody></table>

</div>

Make sure to include the following in your script pane:

<script type="text/javascript"> 
function showOption(loc,a) { 
if (a == 'yes') { $("#"+loc).slideDown(600); }
else if (a == 'no') { $("#"+loc).slideUp(600); } 
$(".td-"+option).css("background-color", "#ffe066");
$("TD:not(.td-"+option+")").css("background","none"); 
$('.hidContent').hide(); $("#"+option).slideDown(600); }
</script>

To help their nonprofit organizations be successful in achieving their missions, board members must understand their responsibilities, be prepared to ask tough questions, and make difficult decisions. This course provides nonprofit leaders with the ability to build a strong partnership with board members, recognize the importance of finding and developing an active and committed board, and present ways to assess board performance. In addition, a biblical perspective on governance and oversight will help nonprofit leaders work with their board in a godly, Kingdom-building way.

<h4 class="toggle">BOARD DEVELOPMENT (3)
<img alt="" height="10" src="/_files/images/ico-toggle.png" width="25" /></h4>
<div class="hidContent"><p>To help their nonprofit ....</p></div>

Make sure to include the following in your script pane:

<script type="text/javascript"> 
//toggle the component with class
$(document).ready(function() {
  $(".toggle").click(function()
  {
    $(this).next(".hidContent").slideToggle(600);
  });
});
</script>