Баян сделан на чекбоксах без скриптов с минимум стилей.

При открывании секции баяна крестик меняется на линию и наоборот.

Код:

<div class="statti-nav">
	<h4>Навігація</h4>			
	<input class="zag-nav" type="checkbox" id="chk-1" checked>
	<label class="nav-menu" for="chk-1">
		<span>ДПІ інформує</span>
			<ul class="in-menu">
				<li><a href="">Рубрика “Оголошення\Новини”</a></li>
				<li><a href="">Рубрика Листи ДПА</a></li>
				<li><a href="">Рубрика “Питання-Відповіді”</a></li>			
			</ul>					
	</label>	
</div>

<div class="statti-nav">					
	<input  class="zag-nav" type="checkbox" id="chk-2">
	<label class="nav-menu" for="chk-2">
		<span>ДПІ інформує</span>
			<ul class="in-menu">
				<li><a href="">Рубрика “Оголошення\Новини”</a></li>
				<li><a href="">Рубрика Листи ДПА</a></li>
				<li><a href="">Рубрика “Питання-Відповіді”</a></li>			
			</ul>					
	</label>
</div>

<div class="statti-nav">
	<input  class="zag-nav" type="checkbox" id="chk-3">
	<label class="nav-menu" for="chk-3">
		<span>ДПІ інформує</span>
			<ul class="in-menu">
				<li><a href="">Рубрика “Оголошення\Новини”</a></li>
				<li><a href="">Рубрика Листи ДПА</a></li>
				<li><a href="">Рубрика “Питання-Відповіді”</a></li>			
			</ul>					
	</label>
</div>

Стили:

 /*MENU ZLIVA*/
.statti-nav{position:relative; overflow:hidden; margin:0 0 10px 0;} 
.statti-nav h4 {color:#0c68a4; font-size:18px; text-transform: uppercase; position:relative; margin-bottom:10px;}
.statti-nav h4::before {bottom:-5px;}
.nav-menu {display:block; width:100%;position:relative; min-height:30px; overflow:hidden;padding: 15px 0 0 10px;}
.nav-menu span {display:block; min-height:30px; padding:0 0 0 30px; position:relative; font-weight:bold; font-size:16px; cursor:pointer;}
.nav-menu span:hover {color:#4288b0;}
.nav-menu span::before, .nav-menu span::after {content:""; display:block; width:20px; height: 3px;  background: #0c68a4;  position:absolute; left:0; top:7px;}
.nav-menu span::after {display:block;width:3px; height: 19px; top:-1px; left:8px;}
.in-menu {display:block; width:100%; padding:0 0 0 40px; }
.in-menu li a {font-size:14px; color:#000;text-decoration:none;padding:0 0 5px 0;  }
.zag-nav, .in-menu {display:none;}
.zag-nav:checked ~ label > .in-menu{display:block;}
.zag-nav:checked ~ label > span::after {display:none;}
.zag-nav:checked ~ label > span {color:#7b7c7c;}