asked on

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!

<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>

Open in new window

HonorGod

OK, I took a look at the information you provided, but I don't see how you want the contents to change when the links are clicked.

You have the following links defined.

- Faculty & Staff
- Community & Church
- Parents & Friends
- Prospective Students
- Current Students
- Undergraduate
- Graduate
- Professional
- Parents
- Counselors
- Youth Leaders
- Institutes
- Online Learners
- Apply Now
- Get More Information
- Scholarship Calculator
- Visit Campus
- Accepted Students
- Orientation

What you need to decide, and explain, is what you want the page to look like when each link is clicked. The general technique is to have an onclick event associated with each link, and have a function invoked to perform the specific changes appropriate for that link.

It is quite common to have a small number of "general" routines that have parameters to identify the specific portion of the page that should be changed. This is frequently done by passing the id attribute for the DIV to be hidden or displayed.

maxms

ASKER

Actually if you look at the link for the page, you will see the tabbed links that will be used to change the div contents:
http://www.maxms.com/hiu/test

Does that make more sense?

Would I use innerHTML? makediv?

maxms

ASKER

Also, I already have separate divs created for each of those links. These are what will populate the main div which is "home_recipe". I guess what I need is the JavaScript and HTML for the links to make it work. Maybe some CSS to hide the divs that aren't active?

maxms

ASKER

One more thing - the links that should change the content are part of the div that should change... is that an issue?

HonorGod

I took a look at your page. It is a very nice start.

Q: Would you use innerHTML?
A: Maybe, it depends upon what you want to do. You may be able to do something much easier though.

Code to Show/Hide a div (using it's id attribute) is shown below. It is really quite straightforward.

  //------------------------------------------------------------
  // Name: showHide()
  // Role: Used to show or hide a portion of the document
  //  Use: onclick='showHide("idAttribute",true);'
  //       to have the portion of the document made visible when
  //       the item is clicked.
  //------------------------------------------------------------
  function showHide( id, show ) {
    var div = document.getElementById( id );
    if ( div ) {
      div.style.display = ( show ) ? 'block' : 'none';
    }
  }

Open in new window

HonorGod

The links to be clicked can appear anywhere on the page.
Just be sure that the like to "show" a section occurs someplace where the link can be seen when the section (div) is hidden. By that I mean, don't have the link to show the div only occur within the div itself.

maxms

ASKER

OK now I'm just more confused. When the page first loads, one of the divs should be visible. When one of the links are clicked, that div should be hidden and the new div shown.

I am also wondering if I need to have the divs in an array? That seems to be a pain with the html. Or do they just reside in within the body of the document?

I have been trying to tweak existing scripts that I have found to no avail. Here is one that I experimented with:

var selectedDiv=0
var totalDivs=0

function contractall(){
var inc=0
while (document.getElementById("home_recipe"+inc)){
document.getElementById("home_recipe_"+inc).style.display="none"
inc++
}
}

function expandone(){
var selectedDivObj=document.getElementById("home_recipe"+selectedDiv)
contractall()
document.getElementById("home_recipe").innerHTML=selectedDivObj.getAttribute("subject")
selectedDivObj.style.display="block"
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
}

Could I get this to work with what I am trying to do? I'm willing to bump up the points on this one for some additional dumbed down answers. ;)

maxms

ASKER

Alright - I am desperate... I can't get anything to work. Someone please help! Tell me truthfully if there is a better way to do this. I need for the client to be able to insert new HTML when they want to change the content so maybe a solution where the interchangeable divs are located in the HTML with some kind of hide/show function? Here is the script I am currently failing with:

var str1 = "<div id='home_recipe1'>
                               <div id='recipe_subtitles_top'>
                               <div id='recipe_faculty'><a href='#' onclick='setInnerHTML('home_recipe',str3);'>Faculty & Staff</a></div>
                          <div id='recipe_community'><a href='#' onclick='setInnerHTML('home_recipe',str4);'>Community & Church</a></div>
                               <div id='recipe_parents'><a href='#' onclick='setInnerHTML('home_recipe',str5);'>Parents & Friends</a></div>
                               </div>
                               <div id='recipe_subtitles_bottom'>
                               <div id='recipe_prospective'><a href='#' onclick='setInnerHTML('home_recipe',str1);'>Prospective Students</a></div>
                               <div id='recipe_current'><a href='#' onclick='setInnerHTML('home_recipe',str2);'>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’s a lot to love at Hope International University. We think you’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</a></li>
</ul></td>
</tr>
</table>
                               <p> </p>
                               </div>
                              </div>
                              </div>";
var str2 = "<div id='home_recipe2'>
                               <div id='recipe_subtitles_top'>
                               <div id='recipe_faculty'><a href='#' onclick='setInnerHTML('home_recipe',str3);'>Faculty & Staff</a></div>
                          <div id='recipe_community'><a href='#' onclick='setInnerHTML('home_recipe',str4);'>Community & Church</a></div>
                               <div id='recipe_parents'><a href='#' onclick='setInnerHTML('home_recipe',str5);'>Parents & Friends</a></div>
                               </div>
                               <div id='recipe_subtitles_bottom'>
                               <div id='recipe_prospective'><a href='#' onclick='setInnerHTML('home_recipe',str1);'>Prospective Students</a></div>
                               <div id='recipe_current'><a href='#' onclick='setInnerHTML('home_recipe',str2);'>Current Students</a></div>
                               </div>
                              <div id='recipe_content'>
                          <p>Whether you’re a current student at <em>Hope</em> or a prospective one wanting to check out what it’s like to attend, this is your page to keep tabs on what’s happening on campus. There’s always something going on, so check back often or you’re sure to miss some of the fun. </p>
                               <table width='95%' border='0' align='center' cellpadding='0' cellspacing='2'>
<tr>
<td width='50%' valign='top'><ul>
<li> <a href='#'>Current Events/Activities</a></li>
<li><a href='#'>Student Activities and Organizations</a></li>
<li> <a href='#'>Bookstore</a></li>
<li> <a href='#'>Library</a></li>
<li> <a href='#'>Fitness Center </a></li>
<li> <a href='#'>Campus Ministry</a></li>
<li> <a href='#'>WebMail</a></li>
</ul></td>
<td width='50%' valign='top'><ul>
<li><a href='#'>Register for Classes</a></li>
<li><a href='#'>International Students </a></li>
<li> <a href='#'>Directory</a></li>
<li> <a href='#'>Current Student Feature </a></li>
<li><a href='#'> Academic, Career and Personal Support Services</a></li>
<li> <a href='#'>Hope Online Login</a></li>
<li><a href='#'><em>More...</em></a></li>
</ul></td>
</tr>
</table>
                               <p> </p>
              </div>
                          </div>";
var str3 = "<div id='home_recipe3'>
                               <div id='recipe_subtitles_top'>
                               <div id='recipe_faculty'><a href='#'>Faculty & Staff</a></div>
                          <div id='recipe_community'><a href='#'>Community & Church</a></div>
                               <div id='recipe_parents'><a href='#'>Parents & 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><em>Hope’s</em> greatest asset is its faculty and staff. Each is deeply committed to the Lord, to the mission of the university and to helping each student reach his or her dream. In this Web site section, parents, students and friends will find information about these men and women who are the backbone of the university. And, faculty and staff can access information and resources here to assist them in their important roles in the life of the university. </p>
                               <table width='95%' border='0' align='center' cellpadding='0' cellspacing='2'>
<tr>
<td width='50%' valign='top'><ul>
<li> <a href='#'>Current Events/Activities</a></li>
<li><a href='#'>Directory</a></li>
<li> <a href='#'>Employment<br />
Opportunities</a></li>
<li> <a href='#'>Human Resources</a></li>
</ul></td>
<td width='50%' valign='top'><ul>
<li> <a href='#'>Featured Faculty/Staff Member </a></li>
<li><a href='#'>WebMail</a></li>
<li><a href='#'><em>More...</em></a></li>
</ul></td>
</tr>
</table>
                               <p> </p>
              </div>
                          </div>";
var str4 = "<div id='home_recipe4'>
                               <div id='recipe_subtitles_top'>
                               <div id='recipe_faculty'><a href='#'>Faculty & Staff</a></div>
                          <div id='recipe_community'><a href='#'>Community & Church</a></div>
                               <div id='recipe_parents'><a href='#'>Parents & 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>Hope International University is more than sprawling buildings and degrees earned. It is a close-knit community built on faith, fellowship and commitment that includes every person who has attended this institution. And, in a very real sense, it encompasses the church and spiritual community that supports us. You will find many resources on this Website to connect you to <em>Hope</em> and to the friends you made here. Check back regularly, there’s always something new. </p>
                               <table width='95%' border='0' align='center' cellpadding='0' cellspacing='2'>
<tr>
<td width='50%' valign='top'><ul>
<li> <a href='#'> Current Events/ Activities</a></li>
<li><a href='#'>Alumni Resources</a></li>
<li><a href='#'> Church Relations</a></li>
<li><a href='#'>Media Resources</a> </li>
</ul></td>
<td width='50%' valign='top'><ul>
<li> <a href='#'>Featured Alumnus/Alumni </a></li>
<li><a href='#'>Giving to Hope</a></li>
<li><a href='#'><em>More...</em></a></li>
</ul></td>
</tr>
</table>
              </div>
                          </div>";
var str5 = "<div id='home_recipe5'>
                               <div id='recipe_subtitles_top'>
                               <div id='recipe_faculty'><a href='#'>Faculty & Staff</a></div>
                          <div id='recipe_community'><a href='#'>Community & Church</a></div>
                               <div id='recipe_parents'><a href='#'>Parents & 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>Parents, friends and families of our students — welcome to the Hope website. You have placed great trust in us by sending your son or daughter to our campus and we do not take that trust lightly. We are in a partnership to serve your child and we encourage you to return to this page often for updates and news from campus. Also, please consider visiting <em>Hope</em> to see first hand the extraordinary, close-knit community of which your child is a part. </p>
                               <table width='95%' border='0' align='center' cellpadding='0' cellspacing='2'>
<tr>
<td width='50%' valign='top'><ul>
<li> <a href='#'> Current Events/ Activities</a></li>
<li><a href='#'>Parent/Student Feature</a></li>
<li><a href='#'>Directory </a></li>
<li><a href='#'>Safety and Security Visit</a></li>
<li><a href='#'>Campus</a></li>
<li><a href='#'>Maps/Directions</a></li>
</ul></td>
<td width='50%' valign='top'><ul>
<li><a href='#'>Church Relations</a></li>
<li><a href='#'>Couselors</a> </li>
<li><a href='#'>Parents of Prospective Students</a></li>
<li><a href='#'><em>More...</em></a></li>
</ul></td>
</tr>
</table>
              </div>
                          </div>";
var setInnerHTML = function( id, str ){
if(!document.getElementById) return; // Not Supported
if(document.getElementById){
document.getElementById(id).innerHTML = str;
}
}

Here is the html where it needs to work:


                        <div id="home_recipe">
                        <div id="home_recipe1">
                               <div id="recipe_subtitles_top">
                               <div id="recipe_faculty"><a href="#" onclick="setInnerHTML('home_recipe',str3);">Faculty & Staff</a></div>
                          <div id="recipe_community"><a href="#" onclick="setInnerHTML('home_recipe',str4);">Community & Church</a></div>
                               <div id="recipe_parents"><a href="#" onclick="setInnerHTML('home_recipe',str5);">Parents & Friends</a></div>
                               </div>
                               <div id="recipe_subtitles_bottom">
                               <div id="recipe_prospective"><a href="#" onclick="setInnerHTML('home_recipe',str1);">Prospective Students</a></div>
                               <div id="recipe_current"><a href="#" onclick="setInnerHTML('home_recipe',str2);">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’s a lot to love at Hope International University. We think you’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</a></li>
</ul></td>
</tr>
</table>
                               <p> </p>
                               </div>
                              </div>
                              </div>


As you can see, the links that need to change the content of the div are themselves within the same div. Is that possible?

Full code examples would be appreciated. Thank you!

HonorGod

I've read, and re-read your updates, and I'm still trying to figure things out.

The "contractall" routine that you have above is will work, but only if you have all of your "home_recipe" elements numbered properly. Note that the expression in the while loop doesn't have an underscore after "recipe", whereas the one within the while loop does.

It might be much better if you provided/passed the prefix in as a parameter. For example:

----------------------------------------------------------------------
function contractall( idPrefix ) {
var inc = 0;
field = document.getElementById( idPrefix + inc );
while ( field ){
field.style.display = "none";
inc++;
field = document.getElementById( idPrefix + inc );
}
}
----------------------------------------------------------------------

This way, you could invode the routine using something like:

contractall( "home_recipe_" );

The other routine (expandone) could then also have this same parameter passed.
In general, it is best to avoid depending upon global variables (e.g., selectedDiv) if possible.

----------------------------------------------------------------------
function expandone( idPrefix ) {
var divId = idPrefix + selectedDiv;
var selectedDivObj = document.getElementById( divId );
contractall( divId );
document.getElementById( divId ).innerHTML = selectedDivObj.getAttribute( "subject" );
selectedDivObj.style.display="block";
selectedDiv = ( selectedDiv < totalDivs - 1 ) ? selectedDiv + 1 : 0;
}
----------------------------------------------------------------------

In spite of this though, why do you want the the innerHTML of the specified (selected) ID to be assigned the value of the subject attribute?

maxms

ASKER

Yeah, here's the thing... I don't know what I want as far as the script itself. That is why I need you. :) I just know what I want the end result to be as far functionality. Can you give me some code to work with using the actual values from my divs? I'm so lost that I think I just need a fresh start.

maxms

ASKER

OK - let's start over.

1. The part that is challenging me on this is that the tab structure for the links on these "recipe cards" are stacked. So, when one of the top tabs is clicked, the whole top tab row needs to move down to the bottom row in order to make the current link tab active. To do that within the CSS, I created each link row as it's own div. Along with changing the background and html content of the div, I also need the position of the 2 tab link rows to change position. I haven't been able to find anything where someone has done this with the links that change the div contents being inside that same div.

2. I also am struggling with how to call the large amount of content that needs to change for each link. If I place it within the JavaScript it needs to have a bunch of code adjustments because of all of the quotes, correct? Is there a way to use a separate file to store this info and call it from there?

OK - I think that might be more clear. Please let me know if it is not. Here is the test link again:
http://www.maxms.com/hiu/test

------------------Within the HTML body:
 
<div id="home_recipe">
				<div id="home_recipe1">					  
					  <div id="recipe_subtitles_top">
					    <div id="recipe_faculty"><a href="#"/>Faculty &amp; Staff</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</a></li>
                            </ul></td>
                          </tr>
                        </table>
					  </div>
					</div>
					</div>
 
------------------The CSS so far for this area:
 
#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;
	}
#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: 140px;
	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; }

Open in new window

maxms

ASKER

Correct link: http://www.maxms.com/hiu/test/main.htm

maxms

ASKER

I solved my own issue. It only took a week....

HonorGod

Sorry for the delay in getting back to you. For some reason, my employer wanted some of my time... can you believe it? ;-)

Anyway, I took another look at your site (http://www.maxms.com/hiu/test/main.htm), and am trying to find out what changes you want to make.

I see that the tabs appear to be working correctly:

- Faculty & Staff
- Community & Church
- Parents & Friends
- Prospective Students
- Current Students

i.e., the text, and bulleted list of links change based upon the selection.

What kind of change are you requesting?

ASKER CERTIFIED SOLUTION

maxms

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Vee_Mod

Closed, 500 points refunded.
Vee_Mod
Community Support Moderator