JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="row">
    <div class="col-lg-12">
        <div class="question">
            <span>Как заказать анонимно?</span>
            <div class="plus">
                <div class="plus-line"></div>
                <div class="plus-line" style="transform: rotate(90deg);position: relative;bottom: 11px;"></div>
            </div>
        </div>
    </div>
</div>
<div class="wrap-answer"> <!-- Каждый answer обязательно нужно обернуть классом wrap-answer -->
	<div class="answer" id="first">	<!-- Добавить id если нужно стилизовать по отдельности -->
	    Основная проблема
	</div>
</div>
<!-- ###################################### -->
<div class="row">
    <div class="col-lg-12">
        <div class="question">
            <span>Как заказать анонимно?</span>
            <div class="plus">
                <div class="plus-line"></div>
                <div class="plus-line" style="transform: rotate(90deg);position: relative;bottom: 11px;"></div>
            </div>
        </div>
    </div>
</div>
<div class="wrap-answer"> <!-- Каждый answer обязательно нужно обернуть классом wrap-answer -->
	<div class="answer" id="second"> <!-- Добавить id если нужно стилизовать по отдельности -->
	    Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места.
	    Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места.
	</div>
</div>

CSS

.row{
	margin: 20px 0px 0px 0px;
}
.question{
	width: 240px;
	height:  50px;
	background: #789;
	cursor:  pointer;
	font-family:  comic sans ms;
	text-align:  center;
	color:  #fff;
	letter-spacing:  1px;
	line-height: 46px;
}
.wrap-answer{
	overflow:  hidden;	/* !!! не убирать "overflow:hidden" */
}
.answer{			/* Общий стиль для вопросов */
	width:  500px;
	background: #4CAF50;
	font-family: comic sans ms;
	color: #fff;
	letter-spacing: 1px;
	padding: 20px  20px  20px  20px;
	border: 20px solid #000;
}

#first{
	/* Тут можно настроить стили для каждого ответа по-отдельности, предварительно присвоив каждому классу answer свой id */
}
#second{
	/* Тут можно настроить стили для каждого ответа по-отдельности, предварительно присвоив каждому классу answer свой id */
}

JavaScript

allClass(0.4);  // время transition
 
function allClass(transition){
    let wrapAnswer = document.querySelectorAll('.wrap-answer'), arrayHeight = [];
	[...document.querySelectorAll('.question')].forEach((e,i) => {
		arrayHeight[i] = wrapAnswer[i].offsetHeight + 'px';
		wrapAnswer[i].style.height = '0px';
        setTimeout(()=> wrapAnswer[i].style.transition = transition + 's', 50);
		e.addEventListener('click',() => {
			[...wrapAnswer].forEach(e => e.style.height = '0px');
			wrapAnswer[i].offsetHeight == 0 ? wrapAnswer[i].style.height = arrayHeight[i] : wrapAnswer[i].style.height = '0px';
        });
    });
}