JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<ul class="ac">
    <li>Aaccord
        <div class="desc">Descirption</div>
    </li>
    <li>Aaccord
        <div class="desc">Descirption</div>
    </li>
    <li>Aaccord
        <div class="desc">Descirption</div>
    </li>
    <li>Aaccord
        <div class="desc">Итак, вы уже разобрались с jQuery и теперь хотели бы научиться писать собственные плагины. Отлично! Вы пришли в правильное место. Расширение возможностей jQuery с помощью плагинов и методов — это очень мощный механизм, который сэкономит вам и</div>
    </li>
    <li>Aaccord
        <div class="desc">Descirption</div>
    </li>
</ul>

CSS

ul.ac {
    list-style:none;
    width:400px;
}
ul.ac li {
    padding:8px 5px;
    background:#dfdfdf;
    border-bottom:1px solid white;
}
ul.ac li .desc {
    display:none;
    padding:5px;
    background:#f4f4f4;
}

JavaScript

(function ($) {
    $.fn.myPlugin = function () {
        return this.each(function () {
          var actli = $('li', this);
          var desc = $('.desc', actli);
            actli.hover(function(){
                if(desc.slideUp()){
                $('.desc',$(this)).stop().slideDown();
                }
            },function(){
                 $('.desc',$(this)).stop().slideUp();
            });
            
        });
    };
})(jQuery);

$('ul.ac').myPlugin();