jquery if/else button animation
<p>I have some jquery I wrote and the top half works fine for the animation.  </p>

<p>An example of the animation can be found here (scroll down to About section and Click '+':  http: damon9.com/dev/DC/index38.php</p>

<p>I've tried multiple combinations of if/else statements to find if one of the elements is visible run this function, etc.  I need it to go back and forth.  I'm kind of new to jquery, but any help would be appreciated. Thanks.</p>

<pre><code>html:
&lt;div class="info-box" id="about-box"&gt;
  &lt;div class="info-control"&gt; 
    &lt;!-- end .info-control --&gt;&lt;/div&gt;
  &lt;div class="button-area"&gt;
    &lt;div class="open-close-btn" id="oc_about"&gt;
      &lt;h2&gt;+&lt;/h2&gt;
      &lt;h3&gt;_&lt;/h3&gt;
    &lt;/div&gt;
    &lt;!-- end #open-close-btn --&gt;
    &lt;p id="open-about"&gt;Open&lt;/p&gt;
    &lt;p id="close-about"&gt;Close&lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- end .button-area --&gt;
  &lt;header&gt;Damon&lt;/header&gt;
  &lt;p class="info-title"&gt;Who I am and what I do&lt;/p&gt;
  &lt;p class="info-title"&gt;oijawoijriaejriejwirjw wr aweo  aw oewi jwo ijew oiweaj iwe &lt;/p&gt;
&lt;/div&gt;
&lt;!-- end .info-box --&gt; 

css:
.info-box {
background-color: #000;
width: 410px;
height: 100px;
opacity: .75;
position: absolute;
z-index: 60;
overflow: hidden;
}

.info-box header {font-family: 'GeosansLightRegular';
font-size: 42px;
color: #82da9b;
font-weight: 100;
letter-spacing: 1px;
padding: 6px 10px 0px 12px;
margin: 0;

}
.button-area {float: right; width: 180px; height: 50px;  position: relative; padding:     10px 10px 0 0;}

.button-area p {float: right; font-size: 13px; color: white; font-family: 'GeosansLightRegular';letter-spacing: 1px; padding: 4px 0 0 0; margin: 0;}

.open-close-btn {background-image:url(../images/open-close.png); position: relative; width: 53px; height: 53px; z-index: 70; float: right; display: block; cursor: pointer;  }

.open-close-btn:hover {background-position:0 -53px; cursor: pointer;}

.open-close-btn:active {background-postion:0 -106px; cursor: pointer;}

#oc_about h2{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: 100; font-size: 40px; color: white; text-shadow: 3px 3px 2px #000 inset; margin: -2px 0 0 2px; display: block;}

#oc_about h3{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: 100; font-size: 30px; color: white; text-shadow: 3px 3px 2px #000 inset; margin: -6px 0 0 4px; position: absolute; display: none;}

.button-area #open-about{display: block;}

.button-area #close-about{display: none;}

js:
if ($('.button-area #open-about').is(':visible')) {// if ID exists

    $("#oc_about").click(function () {
    $("#oc_about h2").fadeOut("fast" , function () {
    $(".button-area #open-about").fadeOut("fast" , function () {
    $("#oc_about h3").fadeIn("fast" , function () {
    $(".button-area #close-about").fadeIn("fast" , function () {
    $("#about-box").animate({height:"2000px" , paddingTop: "500px", marginTop: "-500px"}, 500);
                    });
                });
            });
        });
    });

    }

    else {
     $("#oc_about").click(function () {
$("#oc_about h3").fadeOut("fast" , function () {
$(".button-area #close-about").fadeOut("fast" , function () {
$("#oc_about h2").fadeIn("fast" , function () {
$(".button-area #open-about").fadeIn("fast" , function () {
$("#about-box").animate({height:"100px" , paddingTop: "-500px", marginTop: "500px"}, 500);
                    });
                });
            });
        });
    });

     }
</code></pre>
