Tabbed user interface with a panel that expands downward I have managed to get this to work but I am sure there is a better/more polished way to write this can anyone guide me to some shortcuts?

https://jsfiddle.net/zrpgvoL7/4

/* move the products down in the categories for the opening of filters/sort by aswell as slide down the filters or sort by sections */

var filterHeight = $('.product-filter').outerHeight() + 40;

var sortbyHeight = $('.sortby').outerHeight() + 20;

var speed = 1000

// hide by default instead of display:none in css as we need to find the height first

$('.product-filter').css('display', 'none');
$('.sortby').css('display', 'none');


// slide down filters/sort on click of 'refine' or 'sort' buttons

$('.clickable-header').click(function() {

$(this).toggleClass('active');

if ($(this).hasClass('active')) {

    if ($(this).hasClass('filter-header'))  {

        $('.clickable-header').removeClass('active');
        $(this).addClass('active');
        $('.sortby').slideUp(speed);
        $(this).parent().find('.dropable-section').slideDown(speed);
        $('#category-products').animate({ 'marginTop': filterHeight}, speed);
    }

    if ($(this).hasClass('sort-by-header'))  {

        $('.clickable-header').removeClass('active');
        $(this).addClass('active');
        $('.product-filter').slideUp(speed);
        $(this).parent().find('.dropable-section').slideDown(speed);
        $('#category-products').animate({ 'marginTop': sortbyHeight}, speed);
    }
}

else {

     if ($(this).hasClass('filter-header'))  {

        $(this).parent().find('.dropable-section').slideUp(speed);
        $('#category-products').animate({ 'marginTop': 0}, speed);
    }

    if ($(this).hasClass('sort-by-header'))  {

        $(this).parent().find('.dropable-section').slideUp(speed);
        $('#category-products').animate({ 'marginTop': 0}, speed);
    }

}

});
There are a few things you can do to reduce the code, for example:

you can use add to add jquery selections:

$('.product-filter').add('.sortby').css('display', 'none');

rather then have lots of nested if's you can use a ternary op and seperate them to seperate functions:

var action =  $(this).hasClass('active') ? handleActive : handleInactive;
action.call(this);

function handleActive () {
    if ($(this).hasClass('filter-header'))  {

        $('.clickable-header').removeClass('active');
        $(this).addClass('active');
        $('.sortby').slideUp(speed);
        $(this).parent().find('.dropable-section').slideDown(speed);
        $('#category-products').animate({ 'marginTop': filterHeight}, speed);
    }

    if ($(this).hasClass('sort-by-header'))  {

        $('.clickable-header').removeClass('active');
        $(this).addClass('active');
        $('.product-filter').slideUp(speed);
        $(this).parent().find('.dropable-section').slideDown(speed);
        $('#category-products').animate({ 'marginTop': sortbyHeight}, speed);
    }
}

function handleInactive () {
     if ($(this).hasClass('filter-header'))  {

         $(this).parent().find('.dropable-section').slideUp(speed);
         $('#category-products').animate({ 'marginTop': 0}, speed);
     }

     if ($(this).hasClass('sort-by-header'))  {

         $(this).parent().find('.dropable-section').slideUp(speed);
         $('#category-products').animate({ 'marginTop': 0}, speed);
     }
}


you can also remove the duplication where the same outcome is reached regardless of the if, such as:

if ($(this).hasClass('filter-header'))  {

            $('.clickable-header').removeClass('active');
            $(this).addClass('active');
            $('.sortby').slideUp(speed);
            $(this).parent().find('.dropable-section').slideDown(speed);
            $('#category-products').animate({ 'marginTop': filterHeight}, speed);
        }

        if ($(this).hasClass('sort-by-header'))  {

            $('.clickable-header').removeClass('active');
            $(this).addClass('active');
            $('.product-filter').slideUp(speed);
            $(this).parent().find('.dropable-section').slideDown(speed);
            $('#category-products').animate({ 'marginTop': sortbyHeight}, speed);
        }


could be reduced to:

$('.clickable-header').removeClass('active');
$(this).addClass('active');
$(this).parent().find('.dropable-section').slideDown(speed);

if ($(this).hasClass('filter-header'))  {
  $('.sortby').slideUp(speed);
  $('#category-products').animate({ 'marginTop': filterHeight}, speed);
}

if ($(this).hasClass('sort-by-header'))  {
  $('.product-filter').slideUp(speed);
  $('#category-products').animate({ 'marginTop': sortbyHeight}, speed);
}