if 'this case' and 'that case' do 'something' else do 'other something'

Question

I'm trying to create an onClick function which only works below resolution of 768px. The function works on other resolutions such as 992px and above, but for some reason the function still works on resolution 768px itself.

following is my code:

$(document).on('click','.active-tab', function(e){
  if ($(window).width() < 768) {
    if($(this).hasClass('active')) {
      $(this).removeClass("active");
      $(this).siblings().slideUp("fast");
    } else {
      $(this).addClass('active');
      $(this).parent().find('li').slideDown("fast");
    }
  }
  e.preventDefault();
});

.active-tabs {
  ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    list-style: none;
    li {
      display: none;
    }
    li:first-child {
      display: block;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="tabs">
  <ul>
    <li class="active-tab"><a href="">ALL</a></li>
    <li><a href="">TAB ONE</a></li>
    <li><a href="">TAB TWO</a></li>
    <li><a href="">TAB THREE</a></li>
    <li><a href="">TAB FOUR</a></li>
  </ul>
</div>

I'm trying to achieve something like this:

for when resolution is above 768

for when resolution is below 768

the onClick function whenever below 768

Is it the syntax where I am mistaken? or perhaps I'm forgetting something? Appreciate the help guys, thanks.

Answer 1

Your main problem in your post seems to unfounded, but I did notice that there were some logic errors that would cause the first click not to work properly. If you need a reference to prove your check is working, click here (becuase you can't resize a SO snippet).

A different way of achieving a similar effect

I'd first recommend fixing your anchor tag. You could add javascript:void(0) into it or simply put #.

<li class="active-tab"><a href="javascript:void(0);">ALL</a></li>

If you are only using this code to toggle visibility

However, there is one way to further simplify your code. You can use toggle to get around one of your if structures:

$(document).on('click','.active-tab', function(e){
  if ($(window).width() < 768) {
    $(this).siblings().toggle("fast");
  }
  e.preventDefault();
});

If you need more options

Here's a version of your code that uses toggleClass.

if ($(this).hasClass('active')) {
  $(this).siblings().slideUp("fast");
} else {
  $(this).siblings().slideDown("fast");
}
$(this).toggleClass('active');

Answer 2

Please use this code

HTML

<div class="tabs">
  <ul>
    <li><a class="active-tab" href="">ALL</a></li>
    <li><a href="">TAB ONE</a></li>
    <li><a href="">TAB TWO</a></li>
    <li><a href="">TAB THREE</a></li>
   <li><a href="">TAB FOUR</a></li>
  </ul>
</div>

css

    .tabs li{
        display:inline-block;
        vertical-align:top;
    }
    .tabs li a.active-tab{
        color:red;
    }   

    @media screen and (max-width: 767px) {
        .tabs li{
            display:block;
        }
        .tabs li:not(:first-child){
            display:none;
        }
    }

jQuery

$('.tabs').on('click','a', function(e){
  if ($(window).width() < 768) {    
    $(this).parent('li').siblings().slideToggle("fast");
  } else {      
    $('.tabs a').removeClass('active-tab');
    $(this).addClass('active-tab');
  } 
  e.preventDefault();
});


$(window).on('load resize', function () {
    $('.tabs li').removeAttr('style');      
});