Change text onclick

Change text onclick

Hi,

Im very new to jquery. I have a "contact" button which toggles a box open and closed.

Im trying to do it so when you click on "contact" the contact text will change to "close". Then when you click on "close" it will change back to "contact".

Here is a link to the site:

Below is my full site code:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
    <title>Simple Toggle with CSS &amp; jQuery by Soh Tanaka</title> 
    <style type="text/css"> 
    html {
    overflow-Y: scroll;
    }
    body {
    font: 10px normal Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.7em;
    }
    *, * focus {
    outline: none;
    margin: 0;
    padding: 0;
    }
     
    .container {
    width: 500px;
    margin: 0 auto;
    }
    h1 {
    font: 4em normal Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    padding: 20px 0;
    color: #aaa;
    }
    h1 span { color: #666; }
    h1 small{
    font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 1.5em;
    display: block;
    color: #666;
    }
    h2.trigger {
    padding: 0 0 0 50px;
    margin: 0 0 5px 0;
    background: url(h2_trigger_a.gif) no-repeat;
    height: 46px;
    line-height: 46px;
    width: 450px;
    font-size: 2em;
    font-weight: normal;
    float: left;
    }
    h2.trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
    }
    h2.trigger a:hover {
    color: #ccc;
    }
    h2.active {background-position: left bottom;}
    .toggle_container {
    margin: 0 0 5px;
    padding: 0;
    border-top: 1px solid #d6d6d6;
    background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
    overflow: hidden;
    font-size: 1.2em;
    width: 500px;
    clear: both;
    }
    .toggle_container .block {
    padding: 20px;
    background: url(toggle_block_btm.gif) no-repeat left bottom;
    }
    .toggle_container .block p {
    padding: 5px 0;
    margin: 5px 0;
    }
    .toggle_container h3 {
    font: 2.5em normal Georgia, "Times New Roman", Times, serif;
    margin: 0 0 10px;
    padding: 0 0 5px 0;
    border-bottom: 1px dashed #ccc;
    }
    .toggle_container img {
    float: left;
    margin: 10px 15px 15px 0;
    padding: 5px;
    background: #ddd;
    border: 1px solid #ccc;
    }

    .blackcontainer {
    background: #000000;
    padding-top: 4px;
    width: 100%;
    }
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){
    $(".toggle_container").hide();
     
    $("h2.trigger").toggle(function(){
    $(this).addClass("active"); 
    }, function () {
    $(this).removeClass("active");
    });
    $("h2.trigger").click(function(){
    $(this).next(".toggle_container").slideToggle("slow,");
    });
     
     
     
     
    $("h2.trigger2").toggle(function(){
    $(".toggle_container").slideDown(); 
    $(this).next(".toggle_container");
    }, function () {
    $(".toggle_container").slideUp();
    $(this).next(".toggle_container");
    });

    $("h2.trigger3").click(function(){
                    $(".toggle_container").slideUp();
            });
     
     
     
    });
    </script> 
    </head> 
     
    <body> 

    <div class="blackcontainer"> 
    <div class="container"> 
      <div class="toggle_container"> 
    <div class="block"> 
    <h3>Need a Logo?</h3> 
    <img src="thumbnail.gif" alt="" /> 
    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p> 
    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 



    </div> 
    </div>
    </div> 
    </div> 


    <p style="text-align: center; font-size: 1.1em;"><a href="http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/">Tutorial</a> by <strong>Soh Tanaka</strong>. Check out his <a href="http://www.sohtanaka.com/web-design-blog/">Web Design Blog</a> for more tutorials!</p> 
     <h2 class="trigger2"><a href="#">Contact</a></h2> 

    </body> 


    </html>

I feel like im in over my head. Could someone offer some help please?