title: Get Class of Parent Div
body: <p>I am trying to flip two cards. I don't want to create duplicate javascript for each "box" so I can easily add boxes and just change the class or id to the number of the box. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="base.css"&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.flip.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"&gt;&lt;/script&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script&gt;
      $(document).ready(function(){
          $(".flip").click(function() {
              var className = $('.box').attr('id');
              $('#'+className).flip({
                  direction:'lr',
                  color: 'white',
              });
  
              $('#'+className+' .content').hide();
              $('#'+className+' .flipped_content').show();
          });
  
          $(".revert").click(function() {
              var className = $('.box').attr('id');
              $('#'+className).flip({
                  direction:'lr',
                  color: '#82f5f5',
              });
              $('#'+className+' .flipped_content').hide();
              $('#'+className+' .content').show();
  
          });
  
      });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="nav"&gt;
  
  
      &lt;div id="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- END NAV --&gt;
  
  &lt;div id="container"&gt;
  
      &lt;div id="1" class="box"&gt;
          &lt;div id="content" class="content"&gt;
              &lt;div id="flip" class="flip"&gt;
                  &lt;img src="flip.png" width="25px"/&gt;
              &lt;/div&gt;
              &lt;br/&gt;&lt;br/&gt;
              &lt;h1 align="center"&gt;Subject 1&lt;/h1&gt;&lt;br/&gt;
              &lt;p&gt;This is a description of subject 1&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="content" class="flipped_content b"&gt;
              &lt;div id="flip" class="revert"&gt;
                  &lt;img src="flip.jpg" width="25px"/&gt;
              &lt;/div&gt;
              &lt;br/&gt;&lt;br/&gt;
              &lt;h1 align="center"&gt;Subject 1 B&lt;/h1&gt;&lt;br/&gt;
              &lt;p&gt;This is a description of subject 1 B&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- END BOX --&gt;
  
      &lt;div id="2" class="box"&gt;
          &lt;div id="content" class="content"&gt;
              &lt;div id="flip" class="flip"&gt;
                  &lt;img src="flip.png" width="25px"/&gt;
              &lt;/div&gt;
              &lt;br/&gt;&lt;br/&gt;
              &lt;h1 align="center"&gt;Subject 2&lt;/h1&gt;&lt;br/&gt;
              &lt;p&gt;This is a description of subject 2&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="content" class="flipped_content b"&gt;
              &lt;div id="flip" class="revert"&gt;
                  &lt;img src="flip.jpg" width="25px"/&gt;
              &lt;/div&gt;
              &lt;br/&gt;&lt;br/&gt;
              &lt;h1 align="center"&gt;Subject 2 B&lt;/h1&gt;&lt;br/&gt;
              &lt;p&gt;This is a description of subject 2 B&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- END BOX --&gt;
  
  
  
      &lt;div id="clear"&gt;&lt;/div&gt;
  
      &lt;div id="footer"&gt;
          &lt;hr&gt;
  
          &lt;p style="float:right;"&gt;Tiny Learners - Copyright 2012&lt;/p&gt;
  
          &lt;p align="left"&gt;About&lt;/p&gt;
  
          &lt;p align="left"&gt;Contact&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- END CONTAINER --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I click on flip I want to know hide the box of the associated div box.</p>
  
  <p>So when I click "flip" inside class 2 I want to hide the div associated with class 2.</p>