JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accord_block">
	<h2>Ответы на часто задаваемые вопросы</h2>

<button class="accordion">Зачем финансировать исполнение государственных контрактов?
</button>
<div class="panel">
  <div class="panel_content">
  	<img src="photo.gif" alt="">
  	<div class="panel_text">
  		Cогласно 44-ФЗ госзаказчики производят оплату по контрактам только после их <br /> исполнения с отсрочкой платежа в среднем 30 дней. А на исполнения нужны <br /> средства. Поэтому мы привлекаем средства и финансируем исполнение<br /> госконтрактов субъектов малого предпринимательства.
  	</div>
  </div>
</div>

<button class="accordion">Зачем финансировать исполнение государственных контрактов?
</button>
<div class="panel">
  <div class="panel_content">
  	<img src="photo.gif" alt="">
  	<div class="panel_text">
  		Cогласно 44-ФЗ госзаказчики производят оплату по контрактам только после их <br /> исполнения с отсрочкой платежа в среднем 30 дней. А на исполнения нужны <br /> средства. Поэтому мы привлекаем средства и финансируем исполнение<br /> госконтрактов субъектов малого предпринимательства.
  	</div>
  </div>
</div>

<button class="accordion">Зачем финансировать исполнение государственных контрактов?
</button>
<div class="panel">
  <div class="panel_content">
  	<img src="photo.gif" alt="">
  	<div class="panel_text">
  		Cогласно 44-ФЗ госзаказчики производят оплату по контрактам только после их <br /> исполнения с отсрочкой платежа в среднем 30 дней. А на исполнения нужны <br /> средства. Поэтому мы привлекаем средства и финансируем исполнение<br /> госконтрактов субъектов малого предпринимательства.
  	</div>
  </div>
</div>
</div>

CSS

.accord_block {
	width: 850px;
	margin: 0 auto;
}

.accord_block h2 {
  text-align: center;
}

.accordion {
    background-color: #e4e4e4;
    border-radius: 5px;
    color: #444;
    cursor: pointer;
    padding: 20px 43px 20px 50px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin-top: 20px;
}

.active, .accordion:hover {
    background-color: #9e9e9e; 
}


.hover, .accordeon:active {
	background-color: #e4e4e4;
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: #e4e4e4;
    overflow: hidden;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-top: -4px;
}

.panel_content {
	background-color: #fff;
    margin: 32px 27px 32px 32px;
    padding: 16px;
    border-radius: 5px;
}

.panel_content:after {
	content: '';
	display: table;
	clear: both;
	width: 749px;
}

.panel_text {
	float: right;
	padding: 20px;
}

.panel_content img {
	float: left;
}



.accordion:after {
content: '';
    color: #777;
    font-weight: bold;
    width: 17px;
    margin-top: 7px;
    padding-top: 5px;
    float: right;
    background-image: url(arrow.png);
    height: 4px;
    background-repeat: no-repeat;
}

.active:after {
  content: '';
	background-image: url(arrow_hover.png);
}

.hover:after {
    content: "";
    background-image: url(arrow_active.png);
}

JavaScript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("hover");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}