Créer un menu accordéon en JQuery

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>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.