JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="answers">


    <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">
        <div class="answer">
            Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются <span style="color:red;">КОНЕЦ</span>
        </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">
        <div class="answer">
            Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами <span style="color:red;">КОНЕЦ</span>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-12">
            <div class="question">
           ...

CSS

/*Секция - ответы и вопросы*/
.answers-on-questions {
    margin-top: 30px;
}
.answers {
    margin-top: 30px;
    text-align: left;
}
.question {
    height: 50px;
    background: #fff;
    line-height: 50px;
    font-family: "RobotoMedium";
    font-size: 18px;
    color: #000;
    padding-left: 20px;
    cursor: pointer;
    box-shadow: 0 0 15px 5px rgba(221, 221, 221, 1);
    position: relative;
}
.plus {
    width: 17px;
    height: 17px;
    background: #cfcfcf;
    position: absolute;
    border-radius: 50%;
    right: 17px;
    top: 17px;
    line-height: 10px;
    text-align: center;
}
.plus-line {
    height: 4px;
    width: 11px;
    background: #fff;
    display: inline-block;
}
.answer {
    border-left: 1px solid #dadada;
    margin: 15px 0 15px 50px;
    padding-left: 20px;
    font-family: "RobotoLight";
    font-size: 16px;
    line-height: 1.5;
}
.wrap-answer{
    overflow: hidden;
}
.row{
    margin: 20px 0px 0px 0px;
}

JavaScript

accordion(0.4);  // время transition
 
function accordion(transition){
	const scrollBar = (i)=> {
		clearTimeout(timeOut), timeOut = setTimeout(()=> {
			window.innerWidth !== document.documentElement.clientWidth ? setTimeout(()=> wrapper[i].style.height = answer[i].offsetHeight + margin + 'px',100) : '';
		},transition*1000+100);
	};

    let wrapper = document.querySelectorAll('.wrap-answer'), answer = document.querySelectorAll('.answer'), timeOut, sizes = [], screenWidth = window.innerWidth,
    	margin = +window.getComputedStyle(answer[0],null).getPropertyValue('margin-top').replace('px','') +
    	+window.getComputedStyle(answer[0],null).getPropertyValue('margin-bottom').replace('px','');

	[...document.querySelectorAll('.question')].forEach((e,i) => {
		sizes[i] = wrapper[i].offsetHeight;
		wrapper[i].style.height = '0px', setTimeout(()=> wrapper[i].style.transition = transition + 's', 50);
		e.addEventListener('click',() => {
			[...wrapper].forEach(e => e.style.height = '0px');
			scrollBar(i);
			!wrapper[i].offsetHeight ? wrapper[i].style.height = sizes[i] + 'px' : wrapper[i].style.height = '0px';
        });
    });

    window.addEventListener('resize',()=> {
		[...wrapper].forEach((e,i) => {
			wrapper[i].offsetHeight ? (scrollBar(i), sizes[i] = answer[i].offsetHeight + margin, wrapper[i].style.height = sizes[i] + 'px') :
			sizes[i] = answer[i].offsetHeight + margin;
		});
	});
}