ECO Form toggle

by dvmac

HTML

<script src="&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;script src=&quot;http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;script src=&quot;../library/script/ecoFormValidation.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;"></script>
<!-- ECO form -->
<div class="formWrap">
<h1>ECO Funding Application Form</h1>
<div id="accordion" class="ui-accordion">
<form id="EcoFund" method="post" action="../form-mail.php" class="form round">
<h3 class="ui-accordion-header">Your Benefits</h3>
 <div class="form-section ui-accordion-content">
 <fieldset>
            <legend class="form-section-title">
                Confirm your benefits
            </legend>
            
  <p>If you're eligible you could get free energy saving home improvements. If you want more information take a look at our <a href="#" target="_blank">eligibility criteria</a> then get the ball rolling by letting us know which benefits you get. Just tick the boxes below, you can tick as many as you need.
</p>
<p>&nbsp;</p>

 <div class="form-question">
                        <span class="form-answer-checkbox-left-align">
                            <input name="ctl00_chkBenefit" type="checkbox" id="ctl00_chkBenefit" class="checkbox-benefit" value="Child Tax Credit" />
                        </span><span class="form-question-label-right-align">
                            <label>
                                Child Tax Credit (where the relevant income is £15,860 or less)</label>
                       </span>
                   ...

CSS

@charset "utf-8";
* {
	box-sizing:border-box;
	}
.formWrap {
	position:relative;
	width: 100%;
	margin:1em auto;
	padding:1em;
}
	/*
* Forms
*/

.form {
	   font-family: Arial,Helvetica,sans-serif;
/*       float:left;*/
       width: 100%;
       margin: 15px 0px 0 0;
 /*      height: auto; */
       padding:1em;
	   background-color:#77A83F;
	   border:1px solid #390;
}

.form-mandatory-key {
       font-family: Arial,Helvetica,sans-serif;
       font-size: 0.8em;
       color: #454545;
       display: inline;
       float: right;
       padding-right: 10px;
}
.form-mandatory-key {
       float: right;
       display: inline;
       padding-right: 10px;
       font-family: Arial,Helvetica,sans-serif;
       font-size: 0.8em;
       color: #454545;
}
.form-section
{
       background-color: #f5f5f5;
       padding: 10px 0px 30px 0px;
       margin-bottom: 10px;
       position:relative;
	   padding:1em;
       /* MP IE only Fix: when form elements stay static instead of flowing with say for example a show / hide div */
       zoom:1;
/*	   border:1px solid red;*/
}

.form-section .form-section-button
{
    clear:both;
    margin-left:200px;
    padding-top:10px;
   *width:100px;
}

.form-section fieldset {
       clear: both;
	   margin-bottom:1em;
	   border:1px solid #999;
}

.form-section fieldset .hide
{
    display : none
}

.form-question {
       display: inline-block; /*height: 100%;*/;
       width: 100%;
       margin-top: 1em;
       position: relative;
/*    border: 1px solid #D5D5D5;*/
}
.form-button-row {
                display: inline-block; /*height: 100%;*/;
                width: 100%;
                margin-top: 0px;
                position: relative;
    /*border-top: 1px solid #D5D5D5;*/
}
.form-section fieldset p.form-text {
       padding: 10px 10px 10px 25px;
}

.form-section fieldset p.combination-header-text-amount, .form-section fieldset p.combination-header-text-time,
.form-question-help p.info{
    padding: 0px;
}

/* Insight...

JavaScript

$(function() {
	//show/hide
	$('a.form-question-help-link').click(function(event) {
		event.preventDefault();
		var divname= $(this).attr('name');
		$("#"+divname).toggle();
		return false;
});

});