Search code examples
jqueryslidetogglejquery-effects

Jquery slideup and down


I was wondering if there was a way to condense this code better so that I don't have to code every possible scenario. Any help is appreciated.

  $('select.contactselect').change(function(){
   var selectVal = $(this).val();
   if(selectVal == 'press'){
    $('.support').slideUp('fast');
    $('.general').slideUp('fast');
    $('.press').delay(100).slideDown('fast', function() {
        // Animation complete.
    });
  }else if (selectVal == 'general'){
    $('.press').slideUp('fast');
    $('.support').slideUp('fast');
    $('.general').delay(100).slideDown('fast', function() {
      // Animation complete.
    });
  }else if (selectVal == 'support'){
    $('.press').slideUp('fast');
    $('.general').slideUp('fast');
    $('.support').delay(100).slideDown('fast', function() {
      // Animation complete.
    });
  }
  });

Solution

  • Add a class 'all_lists' to all those three elements with classes (press, general and support) and then use following.

    $('select.contactselect').change(function(){
      var selectVal = $(this).val();
    
      $('.all_lists').slideUp('fast');
      $('.' + selectVal).delay(100).slideDown('fast', function() {
    // Animation complete.
    });
    
    });