title: jQuery refactoring, how to avoid repetitive code?
body: <p>I know this is awfully simple, but I'm new to this and I just need to be shown it once. So when I'm using jQuery/javascript I find myself writing repetitive code again and again to target different elements with the same function, for example:</p>
  
  <pre><code>$(function() {
      $('.icon1').click(function() {
          $('.info1').toggle().addClass('animated fadeInDown');
          $('.info2, .info3, .info4').hide();
      });                        
  });
  $(function() {
      $('.icon2').click(function() {
          $('.info2').toggle().addClass('animated fadeInLeft');
          $('.info1, .info3, .info4').hide();
      });                      
  });
  </code></pre>
  
  <p>and this repeats again for icon3 and icon4. I'm selecting a different element, showing another, hiding another three, and adding different classes in each function, and I don't know what would be the best way not to repeat the whole thing for each element. I would be very glad to be shown any ideas to refactor this, and wouldn't mind seeing how that is done in vanilla js also. <br>
  (For illustration the code here is a snippet from the code on the <a href="https://syknapse.github.io/Syk-Portfolio/#section3" rel="nofollow noreferrer">experience section</a> of my portfolio where clicking on an icon reveals an info panel about it, and hides any previously shown info panels.)</p>