jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div class="movie">

<div class="fimage">
                    <img src="https://www.romanticcollection.ru/sites/default/files/film2.jpg" alt="Сайт о поцелуях" class="attachment-vintauge-home-list-layout
                size-vintauge-home-list-layout wp-post-image">
            </div>
            
<div class="fright">
<div class="decribe">
<div class="content-name"><p>Производство:</p></div>
            <div class="content-desc">
            <p>США / 1980</p>
            </div>
</div>

<div class="decribe">
<div class="content-name"><p>Жанр:</p></div>
            <div class="content-desc">
            <p>Комедия / Мелодрама</p>
            </div>
</div>

<div class="decribe">
<div class="content-name"><p>Слоган:</p></div>
            <div class="content-desc">
            <p>Чувственная история о настоящей любви</p>
            </div>
</div>


<div class="decribe">
<div class="content-name"><p>В ролях:</p></div>
            <div class="content-desc">
            <p>Брук Шилдс, Кристофер Эткинс, Лео МакКерн</p>
            </div>
</div>

<div class="decribe">
<div class="content-name"><p>Режиссер:</p></div>
            <div class="content-desc">
            <p>Рендал Клейзер</p>
            </div>
</div>

</div>

</div>

CSS

.movie {
	display: block;
}

.fimage {
    position: relative;
    float: left;
    width: 40%;
}

.fright {
    width: 55%;
    float: left;
    padding-left: 30px;
}


.decribe {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	border-bottom: 1px solid #e1e1e1;
}
.content-name {
    position: relative;
    float: left;
    width: 10%;
	font-weight:bold;
}

.content-desc {
    width: 80%;
    float: left;
    padding-left: 30px;
}


@media (max-width: 991px)
{.decribe {
    width: 100%;
    float: none;
    padding-left: 0;
}
}