title: jquery add/remove class of multiple elements outside of parent div
body: <p>I know there will be a simple way to accomplish this, just struggling to get my head around it. So I have one parent div that holds multiple divs that need an open class attributed to them if a div that is outside the parent div is clicked. Will try explain through an html example.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="mediaPlayer"&gt;
      &lt;div class="playerViewer"&gt;
          &lt;div class="playerViewControls"&gt;
              &lt;img src="img/player-button-prev.png" class="playerPrev" alt="prev" /&gt;
              &lt;img src="img/player-button-next.png" class="playerNext" alt="next" /&gt;
          &lt;/div&gt;
          &lt;div class="playerAll playerView"&gt;
              &lt;img src="img/placeholder/player-image.jpg" alt="placeholder image" /&gt;
          &lt;/div&gt;
          &lt;div class="playerPhoto playerView"&gt;
              &lt;img src="img/placeholder/player-image.jpg" alt="placeholder image" /&gt;
          &lt;/div&gt;
          &lt;div class="playerVideo playerView"&gt;
              &lt;img src="img/placeholder/player-image.jpg" alt="placeholder image" /&gt;
          &lt;/div&gt;
          &lt;div class="playerMap playerView"&gt;
              &lt;img src="img/placeholder/player-image.jpg" alt="placeholder image" /&gt;
          &lt;/div&gt;
          &lt;div class="playerRelated playerView"&gt;
              &lt;img src="img/placeholder/player-image.jpg" alt="placeholder image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="playerControl"&gt;
          &lt;div class="playerBtn playerAll"&gt;
              &lt;img src="img/player-button-all.jpg" alt="player button all" /&gt;
              &lt;p&gt;(120) ALL&lt;br /&gt;MEDIA&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="playerBtn playerPhoto"&gt;
              &lt;img src="img/player-button-photo.jpg" alt="player button photo" /&gt;
              &lt;p&gt;(40) PLACE&lt;br /&gt;PHOTOS&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="playerBtn playerVideo"&gt;
              &lt;img src="img/player-button-video.jpg" alt="player button video" /&gt;
              &lt;p&gt;(40) PLACE&lt;br /&gt;VIDEOS&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="playerBtn playerMap"&gt;
              &lt;img src="img/player-button-map.jpg" alt="player button map" /&gt;
              &lt;p&gt;LOCATION&lt;br /&gt;MAP&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="playerBtn playerRelated"&gt;
              &lt;img src="img/player-button-related.jpg" alt="player button related" /&gt;
              &lt;p&gt;(40) RELATED&lt;br /&gt;MEDIA&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So if .playerBtn.playerAll is clicked I want BOTH that div and it's corresponding div inside .playerViewer (which in this case would be .playerAll.playerView) to receive the class open and any other div's with the class open inside #mediaPlayer to have the class open removed.</p>