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
    });
  });

});

score 1 · Answer 1 · answered Oct 05 '21 at 08:07

1

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()

answered Oct 05 '21 at 08:07

cloned

6,346
4
26
38

Thanks cloned. It's really cool seeing all these different ways to do the same thing. Definitely a nice way of learning. Gonna try this too, I'm much more comfortable with CSS by itself but only just learning how jQuery can extend it. I have tried to follow general learning tutorials but never seem to manage to recall a methodology when I need something done. There's something about solving a specific problem that is a better teacher/learning method for me. – ganoobi Oct 05 '21 at 11:00

Gass · Answer 2 · 2021-10-05T14:12:43.477

1

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:

<script>

const arr = ['#SECTION-MAPS','#PHONE-SECTION', '#SECTION-CONTACT-FORM', '#SECTION-BRICK-QUOTE-FORM', '#SECTION-AGGREGATE-QUOTE-FORM'];

jQuery(document).ready(function() {
 
      for(var i = 0; i < arr.length; i++){$(arr[i]).hide()}

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

      for(var i = 0; i < arr.length; i++){$(arr[i]).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});     
    });    

</script>

edited Oct 05 '21 at 14:12

answered Oct 05 '21 at 08:12

Gass

7,536
3
37
41

Thanks Gass. I'm gonna have to spend a bit of time with this one - on the face it looks so complex! (or should that be 'cryptic'). Definitely going to play with it though - I can see the benefit of cycling through a list of stuff – ganoobi Oct 05 '21 at 10:51
Your welcome.. To do more with less code, will always be more complex. But don't think is that complicated. See, it's a loop with a limit of `arr.length` which is the length of the array, in this case been `5` and `$(arr[i])` is the same as`jQuery(arr[i])` what this does is to get the element of the array in the `i` position. In this loop `i` is 0, 1, 2, 3 and 4 – Gass Oct 05 '21 at 11:02
1

Yes. I'm playing with it now. I have not encountered this sort of thing before but I can totally see the value – ganoobi Oct 05 '21 at 11:07
If you are interested in playing a little bit more with arrays, take a look at this other answer of mine here: https://stackoverflow.com/questions/69432591/jquery-card-animation-on-hover/69433872#69433872 .... You can do cool things combining arrays and loops.. – Gass Oct 05 '21 at 11:10

score 1 · Answer 3 · answered Oct 05 '21 at 08:15

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.

Thank you TrickyPR. I tried this one first. Perfect. As I understand then a function can be like a bunch of commands packaged into a group like a css style. Then instead of attaching it to something you "call" it by inserting its name like some kinda shorthand. I can already see a bunch of things I've done that can benefit from this. Probably learning this all the wrong way round I guess, but I am only now discovering just how much jQuery certainly can enhance my UI design. — ganoobi, Oct 05 '21 at 10:57
Thanks for the link - I see theres a lot more to functions! My jQuery is pretty much cut+paste with sloppy amateurish modifications and extensions, but its very motivating to see what it actually accomplishes. — ganoobi, Oct 05 '21 at 11:06
@ganoobi No problem. Generally I find that learning things as required is sometimes the best way to learn because it sticks in your head more. Hope you continue learning! — TrickyPR, Oct 06 '21 at 09:11

jQuery - how to reduce repitition

3 Answers3

Your code would look like so: