Change content of div on click

Hello everyone,

I have been working with this for a while now and can't seem to get it right. I am a hack when it comes to JavaScript and usually can find a pre-made script that I can adjust to what I need but this one is giving me issues. Seems like it should be easy...?

I need to be able to change the contents of a div tag when links within that tag are clicked. It should work like a tabbed "recipe card" type of navigation. I have attached the code that should show up on page load within the div id="home_recipe". When the links labeled recipe_* are clicked, the whole content should change.

Here is the CSS I am using for this area as well:

            /* recipe cards */
#home_recipe {
      width: 350px;
      color: #FFFFFF;
      text-align: left;
}
      #home_recipe ul {
      line-height: 1.4em;
      list-style-image:  url(../images/home_recipe/bullet_blue.gif);
      margin-left: -10px;
      text-indent: 2px;
      }
.recipe_hide {
      display:none;
}
#home_recipe1 {
      background-image: url(../images/home_recipe/recipe_prospective.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}
#home_recipe2 {
      background-image: url(../images/home_recipe/recipe_current.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}
#home_recipe3 {
      background-image: url(../images/home_recipe/recipe_faculty.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}      
#home_recipe4 {
      background-image: url(../images/home_recipe/recipe_community.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}
#home_recipe5 {
      background-image: url(../images/home_recipe/recipe_parents.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}
#recipe_subtitles_top {
      font: bold 0.9em Arial, Helvetica, sans-serif;
      width: 329px;
      height: 21px;
      vertical-align: middle;
}
#recipe_subtitles_bottom {
      font: bold 0.9em Arial, Helvetica, sans-serif;
      color: #FFFFFF;
      width: 329px;
      height: 20px;
      vertical-align: middle;
}
      #recipe_subtitles_top a, #recipe_subtitles_top a:visited {color:#fff; text-decoration:none; }
      #recipe_subtitles_top a:hover, #recipe_subtitles_top a:active {color:#fff; text-decoration:underline; }
      #recipe_subtitles_bottom a, #recipe_subtitles_bottom a:visited {color:#fff; text-decoration:none; }
      #recipe_subtitles_bottom a:hover, #recipe_subtitles_bottom a:active {color:#fff; text-decoration:underline; }
#recipe_faculty {
      width: 83px;
      float: left;
}
#recipe_community {
      width: 120px;
      margin-left: 10px;
      float: left;
}
#recipe_parents {
      width: 107px;
      margin-left: 9px;
      float: left;
}
#recipe_prospective {
      width: 129px;
      float: left;
}
#recipe_current {
      width: 192px;
      margin-left: 8px;
      float: left;
}

#recipe_content {
      margin-right: 12px;
      font-size: 8pt;
}
      #recipe_content a, #recipe_content a:visited {color:#036; text-decoration:none; }
      #recipe_content a:hover, #recipe_content a:active {color:#369; text-decoration:underline; }
      /* end recipe cards */

Please let me know if you need anything else from me. Thank you SO much!

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:

<div id="home_recipe">
					<div id="home_recipe1">					  
					  <div id="recipe_subtitles_top">
					    <div id="recipe_faculty"><a href="#">Faculty &amp; Staff</a></div>
				        <div id="recipe_community"><a href="#">Community &amp; Church</a></div>
					    <div id="recipe_parents"><a href="#">Parents &amp; Friends</a></div>
					  </div>
					  <div id="recipe_subtitles_bottom">
					    <div id="recipe_prospective"><a href="#">Prospective Students</a></div>
					    <div id="recipe_current"><a href="#">Current Students</a></div>
					  </div>
					<div id="recipe_content">
				      <p>Welcome to Hope International University, a Christian institution of higher learning. <em>Hope</em> is devoted to providing you with a challenging and rewarding educational experience that equips you well for both your chosen career path and a life of service. Take a few moments to explore our degree programs, campus and community. There&rsquo;s a lot to love at Hope International University. We think you&rsquo;ll agree.</p>
					    <table width="95%" border="0" align="center" cellpadding="0" cellspacing="2">
                          <tr>
                            <td width="50%" valign="top"><ul>
                              <li> <a href="#">Undergraduate</a></li>
                              <li> <a href="#">Graduate</a></li>
                              <li> <a href="#">Professional</a></li>
                              <li> <a href="#">Parents</a></li>
                              <li> <a href="#">Counselors</a></li>
                              <li> <a href="#">Youth Leaders</a></li>
                              <li> <a href="#">Institutes</a></li>
                            </ul></td>
                            <td width="50%" valign="top"><ul>
                              <li> <a href="#">Online Learners</a></li>
                              <li> <a href="#">Apply Now</a></li>
                              <li> <a href="#">Get More Information</a></li>
                              <li> <a href="#">Scholarship Calculator</a></li>
                              <li> <a href="#">Visit Campus</a></li>
                              <li> <a href="#">Accepted Students</a></li>
                              <li> <a href="#">Orientation</li>
                            </ul></td>
                          </tr>
                        </table>
					    <p>&nbsp;</p>
					  </div>
					</div>
				</div>