moslem,
на форуме много ...очень много подобных примеров ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.stfilters + .info-bubble {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
$(".stfilters").on("click", function (event) {
$info = $("+ .info-bubble", this);
$(".stfilters + .info-bubble").not($info).slideUp(500);
$info.slideToggle(800);
});
$(document).on("click", function (event) {
if ($(".sf-field").has(event.target).length === 0) $(".stfilters + .info-bubble").slideUp(500);
});
})
</script>
</head>
<body>
<div class="sf-field">
<span class="stfilters">07.04.2014 - 13.04.2014</span>
<div class="info-bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, modi, deserunt, beatae perferendis perspiciatis ex quis tenetur fuga officiis iure vero eum sint minima soluta quod saepe expedita aspernatur. Aspernatur, recusandae, iusto, qui excepturi consectetur hic quos voluptatum ex quo voluptate libero asperiores reiciendis dolore nemo provident iste praesentium dolorum officiis eos mollitia natus cupiditate quasi perspiciatis! Quibusdam, perferendis, reprehenderit, ducimus consequuntur quia excepturi eos magnam in voluptatum minus maiores nemo sit laborum doloribus tempore quos non assumenda voluptate necessitatibus molestias labore officia facilis quidem officiis quisquam iure enim quaerat ipsum sequi earum? Odit, rerum est earum suscipit atque molestias.</div>
</div>
<div class="sf-field">
<span class="stfilters">Площадки</span>
<div class="info-bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, modi, deserunt, beatae perferendis perspiciatis ex quis tenetur fuga officiis iure vero eum sint minima soluta quod saepe expedita aspernatur. Aspernatur, recusandae, iusto, qui excepturi consectetur hic quos voluptatum ex quo voluptate libero asperiores reiciendis dolore nemo provident iste praesentium dolorum officiis eos mollitia natus cupiditate quasi perspiciatis! Quibusdam, perferendis, reprehenderit, ducimus consequuntur quia excepturi eos magnam in voluptatum minus maiores nemo sit laborum doloribus tempore quos non assumenda voluptate necessitatibus molestias labore officia facilis quidem officiis quisquam iure enim quaerat ipsum sequi earum? Odit, rerum est earum suscipit atque molestias.</div>
</div>
<div class="sf-field">Программы</div>
<div class="sf-field">SubID</div>
</body>
</html>