jQuery - how to reduce repitition

Question

I realise this is a pretty basic question but as a designer and copy-paste jQuery-ist I am not sure of the standard methods one might use - its obvious that due to repetition this could be done with less verbiage. What is a good way to do this. Any pointers to reducing the 'hides' to a one liner? Thanks

jQuery(document).ready(function() {

  // Make sure all sections are hidden by default
  // Hide all Choice Sections
  jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
  jQuery('#PHONE-SECTION').hide();
  jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
  jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
  jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();

  // Show the Call Uus section  
  jQuery('.rv_callus_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Call us section   
    jQuery("#PHONE-SECTION").slideDown();
    jQuery('.rv_callus_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PHONE-SECTION").offset().top - 250
    });
  });

  // Hide the Call Us Panel 
  jQuery('.rv_close_button_callus').click(function(e) {
    e.preventDefault();
    jQuery("#PHONE-SECTION").slideUp();
    jQuery('.rv_callus_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });

  // Show the Contact Form section  
  jQuery('.rv_sendusamessage_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Contact Form section
    jQuery("#SECTION-CONTACT-FORM").slideDown();
    jQuery('.rv_sendusamessage_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#SECTION-CONTACT-FORM").offset().top - 250
    });
  });

  // Hide the CONTACT form      
  jQuery('.rv_close_button_contact').click(function(e) {
    e.preventDefault();
    jQuery("#SECTION-CONTACT-FORM").slideUp();
    jQuery('.rv_sendusamessage_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });

  // Show the MAPS section  
  jQuery('.rv_ourlocations_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Maps section    
    jQuery("#SECTION-MAPS").slideDown();
    jQuery('.rv_ourlocations_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#SECTION-MAPS").offset().top - 250
    });
  });

  // Hide the MAPS section      
  jQuery('.rv_close_button_maps').click(function(e) {
    e.preventDefault();
    jQuery("#SECTION-MAPS").slideUp();
    jQuery('.rv_ourlocations_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });

  // Show the AGGREGATES QUOTE  section 
  jQuery('.rv_request-aggregates-quotation_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Quote Choice section        
    jQuery("#SECTION-AGGREGATE-QUOTE-FORM").slideDown();
    jQuery('.rv_request-aggregates-quotation_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#SECTION-AGGREGATE-QUOTE-FORM").offset().top - 250
    });
  });

  // Hide the AGGREGATES QUOTE form     
  jQuery('.rv_close_button_quote').click(function(e) {
    e.preventDefault();
    jQuery("#SECTION-AGGREGATE-QUOTE-FORM").slideUp();
    jQuery('.rv_close_button_quote').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });


  // Show the BRICKS QUOTE section  
  jQuery('.rv_request-bricks-quotation_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Bricks Quote  section       
    jQuery("#SECTION-BRICK-QUOTE-FORM").slideDown();
    jQuery('.rv_request-bricks-quotation_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#SECTION-BRICK-QUOTE-FORM").offset().top - 250
    });
  });

  // Hide the BRICKS QUOTE form     
  jQuery('.rv_close_brick_button').click(function(e) {
    e.preventDefault();
    jQuery("#SECTION-BRICK-QUOTE-FORM").slideUp();
    jQuery('.rv_close_brick_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });

});

user_4733161 · Answer

Either use a class:

$('.hide-me').hide()

This hides all elements that have the hide-me class.

Alternative is you can also target multiple Elements in the jquery Selector, just like with CSS:

$('#section1, #section2, #section3').hide()

user_14895985 · Answer

You can do a one liner using a loop mixed with an array (containing all the ids) to itirate through all your elements:

for(var i = 0; i < arr.length; i++){$(arr[i]).hide()}`

Your code would look like so:

user_14970835 · Answer

You can use functions to run common code multiple times. These can take in multiple "options" (called parameters) which can allow you to group similar code that only has to vary slightly. MDN has some great tutorials for learning. They generaly look something like this:

function functionName() {
    // Do something here
}

functionName() // Runs the code where the comment "Do something here" is

Using them in your code would look something like this:

function hideEverything() {
    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
}

jQuery(document).ready(function() {
 
    hideEverything();


    // Show the Call Uus section    
    jQuery('.rv_callus_button').click(function(e){
        e.preventDefault();

        hideEverything()
        // OPEN the Call us section   
        jQuery("#PHONE-SECTION").slideDown();
        jQuery('.rv_callus_button').toggleClass('show hide');
        jQuery('html,body').animate({scrollTop: jQuery("#PHONE-SECTION").offset().top-250});
    });
     
   // Repeat with the rest of your code
});

There are more advanced strategies you can use, like loops and arrays, but functions are the simplest method to get maximum improvement.

jQuery - how to reduce repitition

3 Answers

Your code would look like so: