JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<ul class="accordion" id="accordion">
                <li class="bg4">
                    <div class="heading"><div><img src="images/p18.png" /></div></div>
                    <div class="bgDescription"></div>
                    <div class="description">
                    
                        <h2><img src="images/gastro.png" />гастроэнтерология</h2>
                        <p></p>
                        <a href="#"></a>
                    </div>
                </li>
                <li class="bg5">
                    <div class="heading"><div><img src="images/p17.png" /></div></div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2><img src="images/urolog.png" />урология</h2>
                        <p></p>
                        <a href="#"></a>
                    </div>
                </li>
                <li class="bg7">
                    <div class="heading"><div><img src="images/p16.png" /></div></div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2><img src="images/onkolog.png" />онкология</h2>
                        <p></p>
                        <a href="#"></a>
                    </div>
                </li>
                <li class="bg8" id="one">
                    <div class="heading"><div><img src="images/p15.png" /></div></div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2><img src="images/kardiolog.png" />кардиология и ангиология</h2>
                        <p></p>
                        <a href="#"></a>
                    </div>
                </li>
                                <li class="bg6">
                    <div class="heading"><div><img src="images/p14.png" /></div></div>
                    <div class="bgDescription"></div>
                    <div class="description">
   ...

CSS

ul.accordion li div.description {
    display: none;
}
ul.accordion li:first-child div.description {
    display: block;
}

JavaScript

$(function() {
    $('#accordion > li').hover(

    function() {
        var $this = $(this);
        $this.stop().animate({
            'width': '354px'
        }, 1000);
        $('.heading', $this).stop(true, true).fadeOut();
        $('.bgDescription', $this).stop(true, true).slideDown(500);
        $('.description', $this).stop(true, true).fadeIn();
    }, function() {
        var $this = $(this);
        $this.stop().animate({
            'width': '73px'
        }, 1000);
        $('.heading', $this).stop(true, true).fadeIn();
        $('.description', $this).stop(true, true).fadeOut(500);
        $('.bgDescription', $this).stop(true, true).slideUp(700);
    });
});