Multiply Nested Accordions from jQuery Tools

Demonstration of multiply nested accordions.

HTML

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/standalone.css">
<div id="accordeon">
            	<!--Menu 1-->
                <div class="titre">
                	Title 1
                </div>
                <div class="contenue">
                	Contain 1
                </div>
                <!--Fin Menu 1-->
                
         		<!--Menu 2-->
                <div class="titre">
                	Title 2
                </div>
                    <div class="soustitre">
                        Sub Title 1
                    </div>
                        <div class="contenue">
                            Contain Sub title 1
                        </div>
                        
                    <div class="soustitre">
                        Sub Title 2
                   	</div>
                        <div class="contenue">
                           Contain sub title 2
                        </div>
                 <!--Fin Menu 2-->
                        
                     
                
                <div class="titre">
                	Title 3
                </div>
                <div class="soustitre">
                        Sub title 1
                    </div>
                <div class="contenue">
                	Contain sub title 1
                </div>
                
                
            </div>

CSS

@charset "utf-8";
/* CSS Document */
#accordeon
{
	width: 850px;	
	margin-left:auto;
	margin-right:auto;
}

.titre
{
	padding: 15px;
	text-align:center;
	background:#BD3D3D;
}


.contenue
{
	margin-right:auto;
	margin-left:auto;
	background:#DDDDDD;
	text-align:center;	
	padding: 20px;
}

#accordeon .titre
{
	border:solid 1px;	
}

#accordeon .soustitre
{
	border:solid 1px;	
}

.soustitre
{
	
	padding: 15px;
	text-align:center;
}

.titre:hover
{
	cursor:pointer;	
}

.soustitre:hover
{
	cursor:pointer;	
}

JavaScript

// JavaScript Document
$(document).ready(function () 
{
	$('div.contenue').slideUp(0);
	$('div.soustitre').slideUp(0);
	
		// Menu 1 niveau
		$('div.titre').click
		(
			function()
			{
				$('div.contenue').slideUp();
				$(this).next('div.contenue').slideToggle();
			}
		)
		
		
		// Ouvre le sous menu
		$('div.titre').click
		(
			function()
			{
				$('div.soustitre').slideUp();
				$(this).next('div.soustitre').slideToggle();
			}
		)
		
		// Ouvre le contenue du sous titre
		$('div.soustitre').click
		(
			function()
			{
				$(this).next('div.contenue').slideToggle();
			}
		)
});