как сократить код?
 

Есть три одинаковых куска с разными селекторами class

$('.epl').click(function (e) {
var $message = $('.eplin');
if ($message.css('display') != 'block') {
$message.show();
var yourClick = true;
$(document).bind('click.myEvent', function (e) {
if (!yourClick && $(e.target).closest('#demo-text').length == 0) {
$message.hide(); $('.mypin').hide();$('.attain').hide();
$(document).unbind('click.myEvent');
}
yourClick = false;
});
}
e.preventDefault();
});

$('.myp').click(function (e) {
var $message = $('.mypin');
if ($message.css('display') != 'block') {
$message.show();
var yourClick = true;
$(document).bind('click.myEvent', function (e) {
if (!yourClick && $(e.target).closest('#demo-text').length == 0) {
$message.hide();$('.eplin').hide();$('.attain').hide();
$(document).unbind('click.myEvent');
}
yourClick = false;
});
}
e.preventDefault();
});

$('.atta').click(function (e) {
var $message = $('.attain');
if ($message.css('display') != 'block') {
$message.show();
var yourClick = true;
$(document).bind('click.myEvent', function (e) {
if (!yourClick && $(e.target).closest('#demo-text').length == 0) {
$message.hide();$('.eplin').hide();$('.mypin').hide();
$(document).unbind('click.myEvent');
}
yourClick = false;
});
}
e.preventDefault();
});

Как бы их в один объединить?

Дык!

$('.epl, .myp, .atta').click();

Там внутри ещё есть var $message = $('.attain');

Тот же класс, только приставка in, красным выделены различия

$('.eplin').hide();
$("." + this.className + "in").hide();

Если классов у эелемента много то можно сделать например атрибут data-class, который будет с приставкой in

спасибо мужики!!!

$('.epl, .myp, .atta').click(function (e) {
      var $message = $("." + this.className + "in"); 
      if ($message.css('display') != 'block') {
        $message.show(); 
        var yourClick = true;
        $(document).bind('click.myEvent', function (e) {
          if (!yourClick && $(e.target).closest('#demo-text').length == 0) {
            $message.hide(); 		
            $(document).unbind('click.myEvent');
          }
          yourClick = false;
        });
      } 
      e.preventDefault();
    });

А можно сократить скрытие? вот это:

if (this.className == "epl") { $('.mypin').hide();$('.attain').hide(); }
if (this.className == "myp") { $('.eplin').hide();$('.attain').hide(); }
if (this.className == "atta") { $('.eplin').hide();$('.mypin').hide(); }

- UP это вообще все надо удалить

Я так понимаю что у вас есть какой-то список, и только 1 его элемент может быть виден на экране. Это делается вообще не так. Вы делаете стилями их все невидимыми и добавляете класс "active" одному из них (а с классом "active" - он видимый). Тогда все что вам надо сделать при клике по другому пункту - найти актив и убрать ему класс и тому на который кликнули - добавить. Даже если у вас не список - судя по тому что вы хотите этот алгоритм тут применим.

спасибо, тупанул :)