<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
display: flex;
align-items: center;
min-height: 100vh;
}
.block-vertical-middle {
background-color: rgb(219, 214, 206);
width: 100%;
}
.block-horizontal-middle {
background-color: rgb(199, 132, 33);
margin: 0 auto;
height: 50px;
max-width: 1200px;
}
</style>
<div class="wrapper">
<div class="block-vertical-middle">
<div class="block-horizontal-middle"></div>
</div>
</div>$(this).addClass('rv_button_opened');
$(this).removeClass('rv_button_closed');
$(buttons).not(this).removeClass('rv_button_opened');
$(buttons).not(this).addClass('rv_button_closed');$(this).addClass('rv_button_opened').removeClass('rv_button_closed');
$(buttons).not(this).removeClass('rv_button_opened').addClass('rv_button_closed');<div className="accordion">
<div className="accordion-header">
<span className="accordion-header__text">ESENTINALS</span>
<svg className="accordion-header__arrow"><use xlink:href="imgs/sprite.svg#arrow"/></svg>
</div>
<div className="accordion-body">content</div>
</div>
<div className="accordion">
<div className="accordion-header">
<span className="accordion-header__text">FINAL TOUCHES</span>
<svg className="accordion-header__arrow"><use xlink:href="imgs/sprite.svg#arrow"/></svg>
</div>
<div className="accordion-body">content 2</div>
</div>const accordions = $('.accordion');
accordions.each(thisAccordion => {
const button = $(thisAccordion).find('.accordion-header');
$(button).click(event => {
event.preventDefault();
accordions.not(thisAccordion).find('.accordion-body').stop().slideUp();
accordions.not(thisAccordion).removeClass('active');
$(thisAccordion).stop().find('.accordion-body').slideDown();
$(thisAccordion).addClass('active');
});
});.accordion-header {
&__arrow {
transition: .3s;
}
}
.accordion {
&.active {
.accordion-header__arrow {
transform: ratate(180deg);
// или display: none; и отоброжать крестик
}
}
}