JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<link rel="stylesheet" href="https://diviziapentrumedici.ro/wp-content/cache/minify/55694.css">
<div class="produs-sgpage">
    <div class="product-container">
        <!-- Begin of content to copy -->
        
            <div class="acc">
                <div class="acc-toggle">
                    <p><strong>Anatomie patologică</strong></p>
                </div>
                <div class="acc-collapse">
                    <ul>
                        <li>microscop;</li>
                        <li>termostat cu temperatura reglabilă;</li>
                        <li>trusă de coloraţie;</li>
                        <li>reactivi şi materiale necesare realizării preparatelor histologice definitive prin incizionare în parafină;</li>
                        <li>instalaţie de apă purificată.</li>
                    </ul>
                </div>
            </div>


            <div class="acc">
                <div class="acc-toggle">
                    <p><strong>Anestezie şi terapie intensivă</strong></p>
                </div>
                <div class="acc-collapse">
                    <p>Dotare generală (pentru terapia durerii şi anestezie/terapie intensivă în condiţii de chirurgie de o zi - one day surgery):</p>
                    <ul>
                        <li>trusă de resuscitare respiratorie şi cardiocirculatorie;</li>
                        <li>sursă de oxigen;</li>
                        <li>medicamente de urgenţă;</li>
                        <li>catetere periferice;</li>
                        <li>perfuzie endovenoasă;</li>
                        <li>monitorizare (EKG, presiune arterială noninvazivă, pulsoximetrie sau numai pulsoximetrie);</li>
                        <li>stetoscop şi tensiometru.</li>
                    </ul>
                    <p>Dotare specifică :</p>
                    <p>Pentru terapia durerii: truse sterile pentru tehnici loco-regionale şi anestezice locale.</p>
                    <p>Pentru anestezie-reanimare:...

CSS

.acc {
    position: relative;
    margin-bottom: 5px;
}

.acc .acc-toggle {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    cursor: pointer;
    position: relative;
    background: #eee;
    margin-left: -40px;
    padding-left: 40px;
}

.acc .acc-collapse {
    display: none;
    position: relative;
    padding-left: 40px;
}

.acc .acc-toggle:before {
    content: '\f054';
    font-family: 'FontAwesome';
    display: block;
    width: 40px;
    text-align: center;
    transition: all 0.15s ease;
}

.acc.opened .acc-toggle:before {
    transform: rotate(90deg);
}

.acc .acc-collapse .list-unstyled li:before {
    display: none;
}

JavaScript

jQuery(document).ready(function($) {
    $('.acc-toggle').on('click', function() {
        var accParent = $(this).parents('.acc');
        accParent.toggleClass('opened');
        accParent.find('.acc-collapse').toggle('hidden visible');
    });
});