[Solved] replace text in layer - show/hide layers inadequate, is there another way?

I'm trying to make one div in my page show different contents at different times. I need:

1. Div contents to change "onclick"
2. The wrapper div to expand if the contents expands (which means I need a relative div)
3. The div to stay in the same place no matter what content shows (which means I need an absolute div)
4. Ideally, I'll use a class to define the attributes (position, absolute) and an ID to identify a layer for show/hide layers (which means I need an absolute div)

#2 is causing me grief; I can't get the wrapper to enclose the long contents

There is a Dreamweaver behaviour, "Set text of layer" which looks neat, but it doesn't work for me since I've got 3 nested divs to give me a dynamically resized background box. The background gifs fail if I use this feature on the outer div, and I can't get it to work on the inner div. The outer div is the one I'm manipulating in #1-4 above.

The test code is here at this time (it may come down in the future, for later readers of this post):

http://s179034073.onlinehome.us/suzie/services.htm

Here are my divs:

.left-wrapper {
width: 500px;
margin-left: 25px;
margin-right: 15px;
float: left;
clear: left;
margin-top: -30px;
margin-bottom: 15px;
}

.expandable-box-left { /*outer layer I'm manipulating */
position: relative; /*needs to be absolute to make it a layer, overlap*/
width: 500px;
z-index:9;
background: url(../images/bottom-left.gif) no-repeat left bottom;
visibility: visible;
}

#exec1 { /*id I've named first content div*/
visibility: visible;
position: relative; /*made it relative to enclose it in wrapper*/
}

#exec2 { /*id I've named second content div*/
visibility: hidden;
position: absolute; /*needs to be absolute to overlay exec1*/
}

The HTML:

Rest of the CSS fyi

/*cosmetic background stuff*/
.box-outer {
background: url(../images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 10px;
}

.box-inner {
background: url(../images/top-left.gif) no-repeat left top;
z-index:11;
}

.expandable-box-left h2 {
background: url(../images/top-right.gif) no-repeat right top;
padding-top: 20px;
padding-bottom: 10px;
}

Any ideas are very welcome.