Hide/Show Div javascript iframes wont work in IE

[eyeheartart]

Hi,

Internet Explorer is being a problem child for me...*

The page in question can be viewed here:*www.raynemakerimages.com/galleries.html
Firefox shows how it *should* display....

Basically, as you can see,*I've created a gallery page with multiple slideshows using iframes & javascript; each of the galleries show/hide when you click on their corresponding link. The first slideshow "Family" appears when the page loads, but the others are hidden with a div style. *Then, when you click on each gallery's link, that gallery appears, but all the other galleries hide.

It works great in most browsers, except Internet Explorer. For some reason, IE 9 beta only shows part of the slideshows; the whole iframe is there, but only a small portion of the photos appear (although the slideshow itself continues to run fine). IE 8 doesn't load the galleries at all, except for the first one ("Family"); the div section appears for them, but the slideshows do not play.

I realized that the problem is the div style (style="display:none; ). The first gallery, "Family", shows fine because it's not hidden to begin with.*When I remove that div style from all the slideshows, then they appear & play fully (instead of partially or not at all) in Internet Explorer. However, the purpose of hiding them is defeated, as they all show up at once when the page loads. I want to keep them all hidden until you click on their respective link to show them.

Anyway, I'm looking for a relatively easy fix for this....help is appreciated!!!

Thanks.

Coding:

<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ShowContent(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>

<div align="center" class="class1">

<a href="javascript:ShowContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
      <span class="class1">Family      </span></a> 

| 

<a href="javascript:ShowContent('artistic'), HideContent('family'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Artistic       </a> 
| 

<a href="javascript:ShowContent('intimate'), HideContent('family'), HideContent('artistic'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Intimate       </a> 

| 

<a href="javascript:ShowContent('maternity'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
        Maternity      </a> 
| 

<a href="javascript:ShowContent('newborns'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('miscellaneous')" class="style1 style32">Newborns      </a> 
| 

<a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32">
        Miscellaneous</a><a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32"></a>       

</div>

[yamaharuss]

Haven't tested in IE but I would certainly clean up that code a bit and put all those onclick functions into one function and let your dynamic variables be something like

showcontent (show, hide1, hide2, hide3, hide4)

[eyeheartart]

Okay.... Simplified it in a different way - changed it to : javascript:HideAllShowOne('name')

I realized the problem in IE is that once the first gallery loads ('family'), the other galleries will not, so that even when you click to show their div layer, they do not play.

What I would like to do is add a javascript function which reloads that unique div's content when you click its link to show it, that way its corresponding gallery will load. I'm not sure how to go about doing that though....

Any suggestions? Is this even the correct or a good solution?

Help is appreciated!!!

FYI: I'm mainly a print designer & tend to just follow tutorials for web stuff, so my ability/knowledge is limited. I'm looking for a simple solution I can copy+paste and/or which only need very simple modification for my purposes.

Thanks!