Créer un menu accordéon en JQuery
On va partir sur un menu très simple, et lui appliquer l’effet jQuery voulu afin de le rendre rétractable en quelques lignes de codes.
Voici un exemple tout pourri, juste pour montrer l’effet jquery toggle sur des blocs:
See the Pen menu retractable by yuyazz (@yuyazz) on CodePen.
Un peu de css :
.center{
width:700px;
margin:auto;
}
section{
width :600px;
display:block;
}
header{
background-color:#eee;
color:black;
border:2px solid black;
border-radius:10px;
text-align:center;
background:url('img/arrow.png')no-repeat 0px -12px;
}
section>header:active{
background-color:#eee;
color:black;
border:2px solid black;
border-radius:10px;
text-align:center;
background:url('img/arrow.png') no-repeat 0 -6px;
}
section >p{
text-align:center;
}
article{
display:none;
}
section>header+img{
float:left;}
Puis le jquery pour finir
<script>
$(document).ready(function() {
$('header').click(function() {
$(this).next().slideToggle('500').css('');
});
$('.enter2').click(function() {
$('.para2').fadeToggle('500');
});
$('.enter3').click(function() {
$('.para3').fadeToggle('500');
});
$('.enter4').click(function() {
$('.para4').fadeToggle('500');
});
});
</script>
Mis à jour le
Par Copier coller | Dans jQuery
