voci cliccabile con all'interno dei form

[fracele]

Ciao ho un grossissimo problema ho realizzato una pagina in html e css nella quale ho una serie di voci quando ci clicco mi si apre a tendina un form per chiedere informazioni il problema sta proprio qui perchè come tento di compilarlo la tendina ritorna nella posizione originaria cioè chiusa
Come faccio a far si che mi rimane aperta finchè non finisco di completare i campi????

Aiutoooooooooooooooo!!!!
codice HTML
<section class="grid col-three-quarters mq2-col-full">
<div class="grid-wrap">
<article id="navtogg" class="grid col-full">
<h2>ATLAS COPCO</h2>
<ul class="toggle-view">
<li>
<h5 class="toggle-title">HB 2200 <span class="toggle-title-detail">- Main features</span></h5>
<div class="toggle">
<form action="send.php" method="post" id="richiesta" name="messaggio">
<input type="hidden" name="modello" value="CP 150">
<ul id="subnav" style="text-align:left;">
<li class="clear">UTENSILE CONO
<div class="tabAccessori">
<input type="checkbox" name="myCheck[UTENSILE CONO]" value="si">richiedi info
</div>
</li>

<li class="clear">UTENSILE SCALPELLO
<div class="tabAccessori">
<input type="checkbox" name="myCheck[UTENSILE SCALPELLO]" value="si">richiedi info
</div>
</li>
<li class="clear">BOCCOLA INFERIORE
<div class="tabAccessori">
<input type="checkbox" name="myCheck[BOCCOLA INFERIORE]" value="si">richiedi info
</div>
</li>
</ul>
<br><br>
<h4>I campi contrassegnati <span class="red">*</span> sono obbligatori.</h4>
<span style="float: left;"><strong>LA TUA E-MAIL <span class="red">*</span>:</strong>
<input style="font-size: 13px;" type="text" id="email" name="email" size="50" value=""></span>
<br><span style="float: left;font-size: 14px;"></span>
<br><span style="float: left;font-size: 14px;"></span><br>

<span><strong>AGGIUNGI NOTE:</strong></span>
<span id="note" style="display:block;"><textarea style="font-size: 10px;" name="note" id="note" rows="3" cols="10"></textarea></span>
<br class="clear">


<button type="submit" title="cerca" class="button"><span>richiedi info</span>
</button>

</form>


</div>
</li>
<li>
<h5 class="toggle-title">Lorem <span class="toggle-title-detail">- Ipsum dolor</span></h5>
<div class="toggle">
<p>Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui.</p>
</div>
</li>
</ul>
</article>
</div> <!-- 100%articles-->

</section>


css
/* - Toggles */
.toggle-view > li {
margin-top: 1em;
position: relative;}
.toggle-title {padding: 0.8em 2em;}
.toggle-title-detail {
font-size: 0.8em;
color: #999;
font-weight: normal;
text-transform: lowercase; }
.toggle-title:after {
content: "\25C0";
float: right;
color: #999;}
.toggle-title:hover:after { color: #555;}
.tactive { background: #FFF;}
.tactive:after {
content: "\25BC";
color: #555;}
.toggle {
padding: 1em 2em;
display: none;
overflow: hidden; }
.toggle > ul li { line-height: 2.5;}
.toggle > ul li:before {
content: "\2714 ";
color: #ddd;
margin-right: 1em;}