JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="What_a_day">День 1</div>
<div class="block_schedule">
<div class="content_schedule"><b>9:00 — </b>Real Time Bidding. Сбор, хранение и анализ обезличенных данных пользователей мобильных устройств</div>
<div class="im_going"></div>
<div class="more_info_schedule">
<p><b>Тип:</b> Лекция</p>
<p><b>Лектор:</b> Сергей Жучков</p>
<p>Директор по решениям, DZ Systems</p>
<p><b>На лекцию идёт:</b> 53 человека</p>
<p><b>Аудитория:</b> Barcamp №2</p>
</div>
<div class="show_hide_schedule"><img src="http://png-4.vector.me/files/images/1/4/144033/head_outline_arrow_down_plain_thumb.jpg" height="15" class="arrow_to_down_up_schedule"></div>
</div>
<div class="block_schedule">
<div class="content_schedule"><b>9:00 — </b>Real Time Bidding. Сбор, хранение и анализ обезличенных данных пользователей мобильных устройств</div>
<div class="im_going"></div>
<div class="more_info_schedule">
<p><b>Тип:</b> Лекция</p>
<p><b>Лектор:</b> Сергей Жучков</p>
<p>Директор по решениям, DZ Systems</p>
<p><b>На лекцию идёт:</b> 53 человека</p>
<p><b>Аудитория:</b> Barcamp №2</p>
</div>
<div class="show_hide_schedule"><img src="http://png-4.vector.me/files/images/1/4/144033/head_outline_arrow_down_plain_thumb.jpg" height="15" class="arrow_to_down_up_schedule"></div>
</div>
CSS
.block_schedule {
margin: 5px;
border: 1px solid #d8dbe0;
/*padding: 15px 20px 15px 20px;*/
font-family:'Myriad Pro Condensed';
font-weight:normal;
background-image: url('../img/bg_schedule.png');
font-size: 12pt;
-webkit-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.47);
-moz-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.47);
box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.47);
transition: 0.5s;
background-color: #fff;
color:black;
}
.content_schedule {
margin: 15px 30px 1px 20px;
background-color: aqua;
width: 75%;
display: inline-block;
}
.im_going {
background-image: url('http://images.vfl.ru/ii/1457118383/7c2bb0d0/11735545.png');
height: 25px;
width: 25px;
display: inline-block;
float: right;
}
.more_info_schedule {
display: none;
padding-left: 40px;
color: #123958;
font-size: 13pt;
}
.show_hide_schedule {
background-image: url('../img/show_schedule_bg.png');
width: 100%;
height: 28px;
}
.arrow_to_down_up_schedule {
margin-top: 12px;
margin-left: 44.5%;
}
.block_schedule:active {
-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);
}
.What_a_day {
text-align:center;
margin-top: 10px;
color: #4b4b4b;
font-family:'Myriad Pro Condensed';
font-weight:normal;
font-size: 13pt;
}
JavaScript
$(".show_hide_schedule").click(function() {
var c = $(this).prev().is(":visible");
$(this).prev().toggle("slow");
$(".arrow_to_down_up_schedule",this).attr("src",c ?"http://png-4.vector.me/files/images/1/4/144033/head_outline_arrow_down_plain_thumb.jpg" : "http://s1.iconbird.com/ico/0612/GooglePlusInterfaceIcons/w128h1281338911586directionalup.png");
});