Почему код не срабатывает с первого раза?

Question

[rinatoptimus]

Имеется 2 таба (По категориям, По алфавиту) с контентом. У одного из них (который называется По алфавиту) в виду большего количества информации высота больше и наезжает на нижний блок (на блок с полосатым фоном). Пробовал задать полосатому фону margin-top:200px и добавить следующий код:

$(document).ready(function(){
 
 $('ul.tabs li').click(function(){
  var tab_id = $(this).attr('data-tab');

  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');
  // test begin 
  //$('.bg-sales-slider').css('margin', '200px auto 0px');
  // test end

  $(this).addClass('current');
  $("#"+tab_id).addClass('current');
  // то, что я добавил:
  $('li[data-tab="tab-1"]').on( "click", function() {
    $('.bg-sales-slider').css('margin', '200px auto 0px');
  });
  $('li[data-tab="tab-2"]').on( "click", function() {
    $('.bg-sales-slider').css('margin', '0px auto 0px');
  });
 })

- в итоге 200px прибавляется только при повторном клике на второй таб. Наверно, есть более простое решение, как всегда, не подскажете, как все-таки сделать чтобы буквы не наезжали на нижний блок?
Здесь electra.staging.ft-ru.ru/shop_service_cafe_desktop.html

Answer 1

[rinatoptimus]

Код вынес наружу, не помогло, заработало, когда у bg-sales-slider поставил маргин 0 auto;