Q:

How to toggle windows with buttons and use click away

I have two or more buttons that that showing some content.  The idea is to show #Cont11 when i click button .BB11 and hide #Cont11 when i click away or when i click two other buttons.  And similarly for the rest.  I managed to achieve show/hide when i click on certain button and click away but the windows dont hide when i click another button when the content is showing.  Its needed to work on mobiles. 
<div id="footer-menu">
  <a class="BB11 BottomButton">Button1</a>
  <a class="BB12 BottomButton">Button2</a>
  <a class="BB13 BottomButton">Button3</a>
</div>
<div id="Content">
  <div id="Cont11" class="ContIn">Some content</div>
  <div id="Cont12" class="ContIn">Some content</div>
  <div id="Cont13" class="ContIn">Some content</div>
</div>

Css:
.ContIn{display: none;}

JS:
$(".BB11").click(function(e){
    $(".showing").fadeOut(300);
    $("#Cont11").fadeIn(300);         //toggle the window
    $("#Cont11").toggleClass("showing");
    $(this).toggleClass("highlighted");
    e.stopPropagation();                   //prevent event propagation
});
$(document).click(function(){
    $("#Cont11").fadeOut(300);           //hide the window
    $("#Cont11").toggleClass("showing");
    $(".BB11").removeClass("highlighted");
});
$("#Cont11").click(function(e){
    e.stopPropagation();                   
});
/*------------------------------------*/
$(".BB12").click(function(e){
    $(".showing").fadeOut(300);
    $("#Cont12").fadeIn(300);
    $("#Cont12").toggleClass("showing");
    $(this).toggleClass("highlighted");
    e.stopPropagation();
});
$(document).click(function(){
    $("#Cont12").fadeOut(300);
    $("#Cont12").toggleClass("showing");
    $(".BB12").removeClass("highlighted");
});
$("#Cont12").click(function(e){
    e.stopPropagation();                   
});
/*------------------------------------*/
$(".BB13").click(function(e){
    $(".showing").fadeOut(300);
    $("#Cont13").fadeIn(300);
    $("#Cont13").toggleClass("showing");
    $(this).toggleClass("highlighted");
    e.stopPropagation();
});
$(document).click(function(){
    $("#Cont13").fadeOut(300);
    $("#Cont13").toggleClass("showing");
    $(".BB13").removeClass("highlighted");
});
$("#Cont13").click(function(e){
    e.stopPropagation();                   
});

A:

use "data-" attributes and only a few classes for each button, that will help you to reduce all the script lines that you wrote.  Here's a fiddle for you.  This will simplify everything, just one method what works for all buttons.  If you want the content to disappear when clicking away, I assume you're trying to create a modal.  Because if you check for clicks in "document" it will disable all the other clickable elements.  So, put an overlay above the document but behind the content and check for clicks there. 
https://jsfiddle.net/tbd5e8cf/1/
$(function(){
    $(".BottomButton").on("click", function(e){
    e.stopPropagation();

    // HIDE ALL ELEMENTS 
    $(".ContIn").fadeOut(); // IF YOU LIKE USE removeClass(); INSTEAD hide(); FOR YOUR CUSTOM CSS. 

    // SHOW THE RELATED CONTENT TO THIS BUTTON
    var cont = $(this).attr("data-toOpen");
    console.log(cont);
    $("#"+cont).fadeIn(); // IF YOU LIKE USE show(); INSTEAD fadeIn(); FOR YOUR CUSTOM CSS. 

  })

  $("#Content").on("click", function(e){//CHECK FOR CLICK 
    e.stopPropagation();
    // HIDE ALL ELEMENTS 
    $(".ContIn").fadeOut();
  })
})

