DIV with Rollover

You're missing the onClick() event in the other divs.

try this:

<script language="javascript">
function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}
</script>
<style type="text/css">
.rolloverad {
	position: fixed; 
	right: 0; 
	top: 150px; 
	width: 25px; 
	height: 149px; 
	background: #65a825;
	display:block;
}

.rolloveradexpanded {
    display: none;
    z-index:1000;
    background:#FFF;
    color:#000;
	position: fixed; 
	right: 0; 
	top: 0px;
	bottom: 0px; 
	width: 100%; 
	border: 1px solid grey;
	overflow-x: hidden;
	-ms-overflow-x: hidden;
	overflow: scroll;
}

.properties {
	 width:100%; 
	 overflow-y: hidden; 
	 overflow: scroll;
}

.rolloverad2 {
	position: fixed; 
	right: 0; 
	top: 300px; 
	width: 25px; 
	height: 232px; 
	background: #5e9cc4;	
}

.rolloveradexpanded2 {
    display: none;
    z-index:1000;
    background:#FFF;
    color:#000;
	position: fixed; 
	right: 0; 
	top: 0px;
	bottom: 0px; 
	width: 500px; 
	overflow: scroll;
	border: 1px solid grey;
}

</style>
<!--
HORIZONTAL SCROLLING
overflow: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
-->


<div class="rolloverad" id="rolloverad" style="display:block" onclick="replace('rolloverad','rolloveradexpanded')">
<table><tr><td style="width:1px"></td><td style="text-align:center"><span class="para12whitesh">F<BR>A<BR>V<BR>O<BR>R<BR>I<BR>T<BR>E<BR>S</span></td></tr></table></div>
<div class="rolloveradexpanded" id="rolloveradexpanded" style="display:none" onclick="replace('rolloveradexpanded','rolloverad')"><table><tr><td width="500" height="100%">
<!--#include file="favorites_pop_out.asp"--></td></tr></table></div>
<div class="rolloverad2" id="rolloverad2" style="display:block" onclick="replace('rolloverad2','rolloveradexpanded2')">
<table><tr><td style="width:1px"></td><td align="center"><span class="para12whitesh">R<BR>E<BR>C<BR>E<BR>N<BR>T<BR>L<BR>Y<BR>&nbsp;<BR>V<BR>I<BR>E<BR>W<BR>E<BR>D</span></td></tr></table></div>
<div class="rolloveradexpanded2" id="rolloveradexpanded2" style="display:none" onclick="replace('rolloveradexpanded2','rolloverad2')"><table><tr><td width="500" height="100%">
<!--#include file="recently_viewed.asp"--></td></tr></table></div>

Select allOpen in new window

Nope - I intentionally missed those out as I would like to have a button to close them rather than a 'click anywhere'.  You can see that the buttons (which are down the right side of the screen) disappear when they are clicked and the other DIV doesn't open...

Here is the URL:

Test URL

Your targeting the wrong ID's

<div class="rolloverad" id="rolloverad" style="display:block" onclick="replace('rolloveradexpanded2','rolloveradexpanded')">
    <table>
        <tr>
            <td style="width:1px"></td>
            <td style="text-align:center"><span class="para12whitesh">F<BR>A<BR>V<BR>O<BR>R<BR>I<BR>T<BR>E<BR>S</span>
            </td>
        </tr>
    </table>
</div>
<div class="rolloveradexpanded" id="rolloveradexpanded" style="display:none">
    <table>
        <tr>
            <td width="500" height="100%"><!--#include file="favorites_pop_out.asp"--></td>
        </tr>
    </table>
</div>
<div class="rolloverad2" id="rolloverad2" style="display:block" onclick="replace('rolloveradexpanded','rolloveradexpanded2')">
    <table>
        <tr>
            <td style="width:1px"></td>
            <td align="center"> <span class="para12whitesh">R<BR>E<BR>C<BR>E<BR>N<BR>T<BR>L<BR>Y<BR>&nbsp;<BR>V<BR>I<BR>E<BR>W<BR>E<BR>D</span>

            </td>
        </tr>
    </table>
</div>
<div class="rolloveradexpanded2" id="rolloveradexpanded2" style="display:none">
    <table>
        <tr>
            <td width="500" height="100%"><!--#include file="recently_viewed.asp"--></td>
        </tr>
    </table>
</div>

Select allOpen in new window

function replace(hide, show) {
    document.getElementById("rolloverad").style.display = "none";
    document.getElementById(hide).style.display = "none";
    document.getElementById(show).style.display = "block";
}

Select allOpen in new window

No - there are two buttons and two large 'expanded' div's and I am trying to get the button to be clicked so the large div shows (which contains the user's favorites)

Edit
Forget that I misunderstood, your code works fine, but you are covering the sidebar when you show the other div.

thanks - but I'm not sure I understand!  I don't seem to be able to get the expanded panel to show when the button is clicked

You have this function overriding your onclick declaration i.e. this fires before your replace function.

function onclick(event) {
replace('rolloverad2','rolloveradexpanded2')
}

Select allOpen in new window

You have this for your replace function
<script language="javascript">

change it to
<script>
or
<script TYPE="text/javascript">

Thanks - done that, but it STILL won't play ball...!  The button just disappears and the large div doesn't display...

just noticed this answer, but noit sure where to put it.  I have the onclick inline, which I thought would work.  I don;t know how to call it the way you have written it:

function onclick(event) {
replace('rolloverad2','rolloveradexpanded2')
}

Select allOpen in new window

Sorry....

WELL DONE - boy oh boy, you really earned those points!  I wish I could give more for effort ;-)  I took the original code from StackOverFlow too, so would have thought whoever wrote that would have known!  Have a good weekend - thank you very much

You still have this function overriding your click event

function onclick(event) {
replace('rolloverad2','rolloveradexpanded2')
}

Select allOpen in new window

where do you see that?  It works now and I can't see this code - I even took the source code of the full page and searched...

Ignore it, must be a FF thing.

ok - thanks again