Андрей812,
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
display: none;
}
.btn.open:after{
content: "Закрыть";
display: block;
position: absolute;
top: 0;
left: 0;
color: #000000;
text-align: center;
width: 100%;
}
.btn{
position: relative;
}
.btn.open{
color: transparent;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var btn = $(".btn"), block = $(".box");
$(document).click(function(event) {
var target = $(event.target),cur;
if (target.is(".btn")) {
event.preventDefault();
var index = btn.index(target);
cur = block.eq(index).slideToggle();
target.toggleClass("open")
}
if (target.closest(".box").length) return;
block.not(cur).slideUp("slow");
btn.not(target).removeClass("open")
})
});
</script>
</head>
<body>
<button id="trigger" class="btn">Категории</button>
<button id="filtertrigger" class="btn" >Фильтр</button>
<aside id="box" class="box">Содержимое категорий</aside>
<aside id="blockfilter" class="box">Содержимое фильтра</aside>
</body>
</html>
на всякий случай toggle в jquery, как в вашем коде выше, так не работает уже давным давно!!!