Ajax - Problème partie accordion avec Rico

par **Invité** » 07 janv. 2006, 19:05

echo '<script language="javascript" type="text/javascript" src="prototype.js"></script>
<script language="javascript" type="text/javascript" src="rico.js"></script>

<div id="myAccordion">

<div id="myFirstTab">
<div class="accordionTabTitleBar">TEST1</div>
<div  class="accordionTabContentBox">

BlaBlaBla......

</div>
</div>
</div>

<div id="myFirstTab">
<div class="accordionTabTitleBar">TEST2</div>
<div  class="accordionTabContentBox">

BlaBlaBla......

</div>
</div>
</div>

<script type="text/javascript">new Rico.Accordion(\'myAccordion\', {panelHeight:180})</script>'."\n\n";

Je l'utilise comme cela

par **Akei** » 13 déc. 2005, 20:56

Bonjour,
Je m'interresse à la partie "accordion" de Rico. Seulement, j'ai un peu de mal à comprendre son fonctionnement

. Quelqu'un l'aurait il déja utilisé?
Voici le code :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"/>
		<title>Rechercher un usager</title>
		<link rel="stylesheet" type="text/css" href="test.css"/>
  		<script type="text/javascript" src="rico.js"></script>
  		<script type="text/javascript" src="prototype.js"></script>
  		<script type="text/javascript" src="util.js"></script>
  	</head>
	<body>
		<script type="text/javascript">
			var saveHeight;
			var showing = true;
			
			function toggleSlide() {
				if ( showing )
			    	{ slideMenuUp(); showing = false; }
			    else
			    	{ slideMenuDown(); showing = true; }
			}
			
		   	function slideMenuUp() {
		    	var menu = $('demosMenu');
		      	saveHeight = menu.offsetHeight;
		
		      	menu.style.overflow = "hidden";
		      	new Effect.Size( menu, null, 1, 120, 8 );
		
		      	$('demoPanelLink').innerHTML = "Show demo panel";
		   	}
		
		   	function slideMenuDown() {
		      	var menu = $('demosMenu');
		      	new Effect.Size( menu, null, saveHeight, 120, 8, {complete:function() { $(menu).style.overflow = "visible"; }} );
		      	$('demoPanelLink').innerHTML = "Hide demo panel";
		   	}
		   	
		</script>
		<table>
			<tr>
				<td>
   					<h2>ACCORDION EXAMPLE</h2>
					<p>Single click title bar for any tab to show its content.</p>
					<div class="bordureCadre" id="accordionExample">

						<div id="panel1">
							<div onMouseOver="changerClasseDessus(this)" onMouseOut="changerClasseDepart(this)" id="panel1Header" class="depart accordionTabTitleBar">
						  		Overview
						  	</div>
					
						  	<div id="panel1Content" class="pasDeContenu accordionTabContentBox">
							 	<br/>
							 	Contenu test1
						  	</div>
						</div>

						<div id="panel2">
						  	<div onMouseOver="changerClasseDessus(this)" onMouseOut="changerClasseDepart(this)" id="panel2Header" class="focus accordionTabTitleBar">
						  		HTML Code
						  	</div>
					
							<div id="panel2Content" class="focusContenu accordionTabContentBox">
								<br/>
								Contenu test2
						  	</div>
						</div>
					</div>
					<script type="text/javascript"> onloads.push( accord ); function accord() { new Rico.Accordion( $('accordionDiv') ); } </script>
				</td>
			</tr>
		</table>
	</body>
</html>

Les fichiers .js sont sur le site de Rico.
Sinon j'arrive à faire les effets voulus. Seulement je ne sais pas comment faire pour que lorsque je clique sur le titre ça déroule pour voir le contenu et l autre se cache.
Si quelqu'un pouvait m'éclairer.
J'espère avoir été assez claire. Je vous remercie.
Ps : voici le site de Rico ici
++

Ajax - Problème partie accordion avec Rico

Répondre

Étendre la vue Revue du sujet : Ajax - Problème partie accordion avec Rico

Ajax - Problème partie accordion avec Rico