Скрыть/показать анкерные метки на небольшом экране

Question

У меня есть следующий код

<div id="contact-buttons-bar" class="slide-on-scroll" data-top="250px" style="left: 0px;"> 
<button class="contact-button-link show-hide-contact-bar" style="left: 0px;"> 
<a class="contact-button-link cb-ancor facebook" target="_blank" title="Follow on Facebook" href="https://www.facebook.com/" style="left: 0px;"> 
<a class="contact-button-link cb-ancor linkedin" target="_blank" title="Visit on LinkedIn" href="https://www.linkedin.com/" style="left: 0px;"> 
<a class="contact-button-link cb-ancor twitter" target="_blank" title="Follow on Twitter" href="https://www.twitter.com" style="left: 0px;"> 
<a class="contact-button-link cb-ancor youtube" target="_blank" title="Follow us on YouTube" href="https://www.youtube.com" style="left: 0px;"> 
</div> 

на замковое случае show-hide-contact-bar кнопки я скрыть все теги anchor переключая класс cb.hidden. Эта функция выглядит так:

$('body').on('click', '.show-hide-contact-bar', function(e){ 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    $('.show-hide-contact-bar').find('.fa').toggleClass('fa-angle-right fa-angle-left'); 
    oContainer.find('.cb-ancor').toggleClass('cb-hidden'); 
    }); 

который работает на месте.

Теперь то, что я пытаюсь достичь, состоит в том, что если размер экрана меньше 768, я хочу скрыть все привязывающие теги до начала и только показать событие click. Я пробовал

var width = $(window).width() 
if (width < 768) { 
    $('.show-hide-contact-bar').find('.fa').removeClass('fa-angle-left').addClass('fa-angle-right'); 
    $('.show-hide-contact-bar').find('.cb-ancor').toggleClass('cb-hidden'); 
} 

Но он не работает. Социальный бар не скрыт для начала.

Изначально я анимировать DIV как:

setTimeout(function(){ 
    $('#contact-buttons-bar').animate({ left : 0 }); 
}, 200); 

Как упомянуто @ edisoni.1337, я должен использовать toggle(). Я пытался использовать его, но моделирование тегов анкерных идет действительно странно:

Answer 1

Вы можете использовать медиа-запросы для этого только с помощью CSS.

@media (max-width: 768px) { 
    .cb-ancor { 
     display:none; 
    } 
} 

Также здесь есть обновленный jsfiddle для щелчка кнопки затруднительного Я использовал .toggle() с JQuery, так это позволит сэкономить много работы для вас. У вас есть сообщение от w3schools page, чтобы вы могли лучше понять, как это работает