11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je cherche à créer un accordéon jQuery (si possible multi level) avec le contenu qui se charge en ajax, et avec un gif de loading qui s'affiche en attendant que tout le fichier chargé soit chargé à 100%.

J'ai essayé de démarrer quelque chose mais je ne suis pas sur que ça soit très bien.


<div id="gallery">

		<div class="projet">
			<h2 alt="test.php">title 1</h2>
			<div class="contenuProjet"></div>
		</div>

		<div class="projet">
			<h2 alt="test.php">title 2</h2>
			<div class="contenuProjet"></div>
		</div>

		<div class="projet">
			<h2 alt="test.php">title 3</h2>
			<div class="contenuProjet"></div>
		</div>

		<div class="projet">
			<h2 alt="test.php">title 4</h2>
			<div class="contenuProjet"></div>
		</div>

		<br class="clear" /> <!-- CLEAR -->
	</div>




$(document).ready(function(){

  $('.contenuProjet').hide();
  $('.projet h2').click(function(){
    var test = $(this).attr('alt');
    $(this).siblings('.contenuProjet').html('<img src="img/icons/loader.gif" alt="">').load(test, function(){
      $(this).slideToggle();
    });
    return false;
  });

});



Merci beaucoup pour votre aide !