jQuery addClass example

Change class name on click in jQuery

HTML

<div class="p-filter__item">
					<a href="#" class="p-filter__link">
						<span>
							Цена
							<i data-role="prop_angle" class="fa fa-angle-down"></i>
						</span>
					</a>

					<div class="p-filter__submenu p-filter__submenu-2" style="width: 296px;">
						<div class="p-filter__wrapper">
							<div class="p-filter__contain">
								<div class="p-filter__price">
									<div class="p-filter__priceleft">
										<span>
											От
										</span>
										<input type="text" name="arrFilter_P1_MIN" id="arrFilter_P1_MIN" value="" size="5" onkeyup="smartFilter.keyup(this)" placeholder="1990.00">
									</div>
									<div class="p-filter__priceright">
										<span>
											До
										</span>
										<input type="text" name="arrFilter_P1_MAX" id="arrFilter_P1_MAX" value="" size="5" onkeyup="smartFilter.keyup(this)" placeholder="9999.00">
									</div>
								</div>
							</div>
						</div>
						<a style="cursor:pointer;" class="p-filter__button" href="javascript:void(0);">Применить</a>
					</div>
				</div>
        <div class="p-filter__item">
					<a href="#" class="p-filter__link">
						<span>
							Материалы
							<i data-role="prop_angle" class="fa fa-angle-down"></i>
						</span>
					</a>
					<div class="p-filter__submenu p-filter__submenu-2" style="display: none;">
						<div class="p-filter__wrapper">
							
							
									<div class="row">
										<div class="col l6 m6">
								<h2>Материал верха</h2>
								<ul class="p-filter__sub">
									<li class="p-filter__subitem">
										<input type="checkbox">
										<label for="lab6">акрил</label>
									</li>
								<li class="p-filter__subitem">
										<input type="checkbox">
										<label for="lab6">бархат</label>
									</li>
									<li class="p-filter__subitem">
										<input type="checkbox">
										<label for="lab6">болонья</label>
									</li>
									<li class="p-filter__subitem">
										<input...

CSS

.p-filter__item {
    display: inline-block;
    position: relative;
    margin-bottom: 8px;
}
.p-filter__link {
    display: block;
    padding: 0 15px;
    line-height: 30px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 4px;
    color: rgba(0,0,0,.5);
    position: relative;
}
.p-filter__link .fa {
    position: relative;
    top: 50%;
}
.p-filter__link.active .fa {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.p-filter__link.active {
    border-color: #c4ac91;
    color: #000000;
}
.p-filter__submenu {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 8px;
    z-index: 99;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.15);
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 16px;
    padding-top: 16px;
}
.p-filter__wrapper {
    max-height: 284px;
    overflow: auto;
}
.p-filter__price {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.p-filter__price span {
    font-size: 16px;
    line-height: 32px;
    color: rgba(0,0,0,.5);
    margin-right: 5px;
}
input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* padding: 20px; */
}

JavaScript

$('.p-filter__link').on('click', function() {

        
        $(this).toggleClass('active');
        $('.p-filter__submenu').fadeOut();
        $(this).parent().children('.p-filter__submenu').fadeToggle();

    

        $(document).click(function (event) {

            if ($(event.target).closest('.p-filter__submenu').length) return;
                $('.p-filter__submenu').fadeOut();
                $('.p-filter__link').removeClass('active');
            event.stopPropagation();

        });

        return false;

    });