Get Class of Parent Div
<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>
