Avant même de jouer de l’accordéon, regardons le Toggle tout simple et qui fait son effet.
1 – En premier lieu, le HTML
<h2>Le titre</h2>
<div>
<div>
<p>Les infos ici</p>
</div>
</div>
2 – Ensuite, le script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
3 – Le code JQuery
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});
4 – La démo ICI
5 – D’autres sources que j’aime bien ICI et le tuto LA
Dans cet exemple, on modifie le bouton selon que la div est ouverte ou fermée.