JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<div class="left_menu">
    <div class="leftmenu_container">
        <div class="leftmenu leftred first" id=""><span class="plus_menu"></span><a href="/linoleum/">Линолеум</a>
            <div class="submenu sub1">
                <div class="leftmenu" id=""><span class="plus_menu"></span><a href="#">Коммерческий (Г1)</a>
                      <div class="submenu sub2">
                        <div class="leftmenu" id=""><a href="#">Коммерческий (Г1)</a></div>
                        <div class="leftmenu" id=""><a href="#">Гомогенный</a></div>
                        <div class="leftmenu" id=""><a href="#">Гетерогенный</a></div>
                        <div class="leftmenu last" id=""><a href="#">Антистатический</a></div>
                    </div>
                </div>             
                <div class="leftmenu" id=""><a href="#">Гомогенный</a></div>
                <div class="leftmenu" id=""><a href="#">Гетерогенный</a></div>
                <div class="leftmenu last" id=""><a href="#">Антистатический</a></div>
            </div>
        </div>
        
        <div class="leftmenu leftred" id=""><span class="plus_menu"></span><a href="#">Ковровые покрытия</a>
              <div class="submenu">
                <div class="leftmenu" id=""><a href="#">Коммерческий (Г1)</a></div>
                <div class="leftmenu" id=""><a href="#">Гомогенный</a></div>
                <div class="leftmenu" id=""><a href="#">Гетерогенный</a></div>
                <div class="leftmenu last" id=""><a href="#">Антистатический</a></div>
              </div>
        </div>
        <div class="leftmenu leftred" id=""><span class="plus_menu"></span><a href="#">Ламинат</a>
             <div class="submenu">
                <div class="leftmenu" id=""><a href="#">Коммерческий (Г1)</a></div>
                <div class="leftmenu" id=""><a href="#">Гомогенный</a></div>
                <div class="leftmenu" id=""><a href="#">Гетерогенный</a></div>
                <div...

CSS

@charset "utf-8";
/* CSS Document */
html {
    color: #000;
    background: #FFF
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset, img {
    border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal
}

ol, ul {
    list-style: none
}

caption, th {
    text-align: left
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal
}

H1 {
    font-size: 22px;
    margin: 15px 0 5px;
}

H2 {
    font-size: 18px;
    margin: 15px 0 5px;
}

H3 {
    font-size: 14px;
	margin: 15px 0 5px;
}

H4 {
    font-size: 16px;
	margin: 15px 0 5px;
}

H5 {
    font-size: 14px;
	margin: 15px 0 5px;
}

H6 {
    font-size: 12px;
	margin: 15px 0 5px;
}

a {
    color: #d81e05;
}

a:hover { 
    text-decoration: none; /* Убирает подчеркивание при наведении курсора на ссылку */
}

q:before, q:after {
    content: ''
}

abbr, acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit
}

input, textarea, select {
    *font-size: 100%
}

legend {
    color: #000
}

#yui3-css-stamp.cssreset {
    display: none
}

/*CSS RESET END*/

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
    font-family: Trebuchet MS, Tahoma, Arial;
    font-size: 13px;
    color: #444343;
}

.clear {
    clear: both;
}

/* Header */
.header {
    height: 224px;
    width: 100%;
    background: url("img/hl.jpg") repeat-x bottom center;
}

.hwrap {
    width: 1000px;
    margin: 0px auto;
}

.logo {
    padding-top: 0px;
}

.sale {
    float:...

JavaScript

$(document).ready(function() {
    $('.plus_menu, .minus_menu').click(function() {
    //$('.submenu1').slideUp(500);
    //$(this).parent('.leftmenu').next('.submenu').removeClass('active');
   // $(this).parent('.leftmenu').next('.submenu').filter(function(){return $(this).css('display')=='block'}).slideUp(500).prev('.leftmenu').removeClass('active');
   // $(this).parent('.leftmenu').next('.submenu').filter(function(){return $(this).css('display')=='none'}).slideDown(500).prev('.leftmenu').addClass('active');
        $(this).parent('.leftmenu').toggleClass('active');
        if($(this).parent('.leftmenu').hasClass('active')){
            $(this).removeClass('plus_menu');
            $(this).addClass('minus_menu');
        }
        else{
            $(this).removeClass('minus_menu');
            $(this).addClass('plus_menu');
        }
    });
    
    $('.leftmenu').each(function(){
        if($(this).hasClass('active')){
            $(this).children('span').removeClass('plus_menu');
            
            $(this).children('span').addClass('minus_menu');
        }
        else{
            $(this).children('span').removeClass('minus_menu');
            $(this).children('span').addClass('plus_menu');
        }
    });    
});