Must be really dumb today - sorry in advance; anyhow have this unordered list

<ul>
<li><div class="openuserform" >Info</div> <div class="userform"></div></li>
<li><div class="openuserform" >Appearence</div> <div class="userform"></div></li>
<li><div class="openuserform" >Pages</div> <div class="userform"></div></li>
<li><div class="openuserform" >Services</div> <div class="userform"></div></li>
<li><div class="openuserform" >Community</div> <div class="userform"></div></li>
</ul>

which on click <div class="openuserform" > I want to load a separate form e.g.

$('.openusersform').live('click',(function(){ 
$('.userform').load('form page.php'); 
});

OK I can get the forms to load in the right div using

$(this).next('.userform').show();
$('.userform').load('form page.php');

but it's very ugly (I think) and I can only every get the first form to process propery.

It is laid out like (ul,li etc.) this so I can have each loaded form aligned under the relevant li.

But I think there has to be a better way as I do not seem to get any if(){} stemnents working to process the forms i.e. if(form1){ $.ajax etc } if (form2) {more ajax}

Suggestions please - thanks