title: For each loop for menu links that affect other div
body: <p>i am trying to understand how to make this code into a loop so I wouldn't have to copy the part where <code>$('.popup-[insert nr]').click</code> every time in the future a new menu link is made for navigation.
  This code is in the purpose of: Click a link, toggle or add a class of show to a hidden <code>div</code> and if any other link is clicked after that every shown div will be hidden.</p>
  
  <pre><code>var popContent = $('.popup-1-content');
  var popContent2 = $('.popup-2-content');
  var popContent3 = $('.popup-3-content');
  var popContent4 = $('.popup-4-content');
  
  var popupArray = [popContent, popContent2, popContent3, popContent4];
  
  $('.popup-1').click(function () {
  
      if ( popContent.hasClass("show") ) {
          popContent.removeClass("show");
      } else {
          for (var i = 0; i &lt; popupArray.length; i++) {
             popupArray[i].removeClass("show");
          }
          popContent.addClass("show");
      }
      return false;
  });
  
  $('.popup-2').click(function () {
  
      if (popContent2.hasClass("show") ) {
          popContent2.removeClass("show");
      } else {
          for (var i = 0; i &lt; popupArray.length; i++) {
             popupArray[i].removeClass("show");
          }
          popContent2.addClass("show");
      }
      return false;
  });
  
  
  $('.close-popup a').click(function(){
  $('.popup-content').toggleClass('hide').removeClass('show');
  return false;
  });
  </code></pre>