Ciao a tutti, ho una pagina strutturato in questo modo:

Menu superiore
Area laterale
Area centrale

io ho un form molto complesso da gestire, intendo con molti campi e vorrei semplificare la gestione lato UI....

vorrei quindi fare in modo che cliccando nelle voci dell'elenco di sinistra (Area1, Area2, Area3....) vengano visualizzate le aree di riferimento tra i campi del form .... quindi vorrei visualizzare solo determinati campi (ad esempio contenuti in un panel) cliccando sulle voci dell'elenco Area1, Area2, Area3, Area4.....


Grazie a tutti!!! posto un esempio della pagina





codice:
 


	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="Email">
	<div id="actions">
		<ul id="jsddm">
			<li id="action_reply">
				<a class="" style="opacity: 1;" href="http://localhost/appname/backoffice/public/index.php?cmd=customer.showall">
					<span>
						[img]demo_files/list_icon.png[/img]
						<strong style="cursor: pointer;">Menu 1[/b]
					</span>
				</a>
			
			<li id="action_reply">
				<a class="" style="opacity: 1;" href="http://localhost/appname/backoffice/public/index.php?cmd=customer.shownew">
					<span>
						[img]demo_files/add.png[/img]
						<strong style="cursor: pointer;">Menu 2[/b]
					</span>
				</a>
			
			<li id="action_reply">
				<a class="" style="opacity: 1;">
					<span>
						[img]demo_files/user_edit.png[/img]
						<strong style="cursor: pointer;">Menu 3[/b]
					</span>
				</a>
			
			<li id="action_reply">
				<a class="" style="opacity: 1;">
					<span>
						[img]demo_files/close.png[/img]
						<strong style="cursor: pointer;">Menu 4[/b]
					</span>
				</a>
			
			<li id="action_reply">
				<a class="" style="opacity: 1;">
					<span>
						[img]demo_files/user_search.png[/img]
						<strong style="cursor: pointer;">Menu 5[/b]
					</span>
				</a>
			
		[/list]
	</div><div id="primary">
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="messageList">
	
	<div class="" id="primary_header">
		<span id="loading"></span>
		<div id="back_button">
			<a href="javascript:submitForm('CustForm')">
				<span class="stronglastword">Salva modifiche</span>
			</a>
		</div>
	</div>

	<div id="primary_content">
		
		[img]demo_files/ajax-loader_s.gif[/img]
		
		<table cellpadding="0" cellspacing="0">
			<tbody><tr>
				<td style="padding: 0pt;" width="100%">		
					<div id="#bodycontent">
					
						<form id="CustForm" method="post" action="index.php">
												
						<div class="form_inputs" style="position: relative;">
							<table class="settings">
								<tbody>	
								<tr>
									<td class="label">Address</td>
									<td>
										<input class="medium required" name="address" id="address" type="text">
										Customer's address
									</td>
								</tr>
								<tr>
									<td class="label">ZIP</td>
									<td>
										<input class="medium required" name="zip" id="zip" type="text">
										Customer's zip code
									</td>
								</tr>
								</tbody>
							</table>
							</div>
							<div class="divider"></div>
						</form> 
													
					</div>
				</td>
			</tr>
		</tbody>
		</table>		
	</div>
</div>
</div>
	<div id="secondary">
	<ul id="nav_secondary">
		[*]
		<div isselectable="true" id="folder_inbox" class="current"><a class="ui-droppable" href="#"> <span class="label">Area 1</span> <span class="unread" style="">6</span>
		</a></div>
		
		[*]
		<div class="" isselectable="true" id="folder_drafts"><a class="ui-droppable" href="#"> <span class="label">Area 2</span> <span class="unread" style="display: none;">0</span> 
		</a></div>
		
		[*]
		<div class="" isselectable="true" id="folder_sent"><a class="ui-droppable" href="#"> <span class="label">Area 3</span> <span class="unread" style="display: none;">0</span>
		</a></div>
		
		[*]
		<div class="" isselectable="true" id="folder_spam"><a class="ui-droppable" href="#"> <span class="label">Area 4</span> <span class="unread" style="display: none;">0</span>
		</a></div>
		
		[*]
		<div class="" isselectable="true" id="folder_trash"><a class="ui-droppable" href="#"> <span class="label">Area 5</span> <span class="unread" style="display: none;">0</span>
		</a></div>
		
	[/list]
	</div>

</div><div id="ui-datepicker-div" style="display: none;"></div>