[SOLVED] show/hide div issue

[matfish]

Hi, my javascript skills are not as good as my php but ill address the issue.

 

Iv got a simple show/hide div (display:none; display:block; kinda thing). Onload its shown, and the content within is displayed. but then i hide it, but when i click the link to display it again the content within is gone? But this is only happening in IE, FF works no probs.

 

Any ideas why is does this?

 

JS:

function show_images(){
document.getElementById('img_list').style.display='block';
}
function hide_images(){
document.getElementById("img_list").style.display="none";
}

[tomfmason]

I normally like it all in one function. Like this...

 

function showHideDiv(id) {
   div = document.getElementById(id);
   div.style.display = (div.style.display == 'none')? 'block' : 'none';
}

 

Try that and I bet you will find it easier to work with.

[matfish]

Hi, the code you provided is just a neater way of what I did - thanks - but I still get the issue of the contents within the DIV are not displayed when I toggle the show/hide link.

 

I do have 3/4 div's within this 1 div Im toggling  - would this cause an issue?

 

Thanks for your replies.

[nogray]

can you post some of your html as well?

[matfish]

The div im trying to show/hide is the id="img_list"

 

<div class="top_right_image_space" id="img_list">
<div id="motioncontainer">
	<div id="motiongallery">
		<nobr id="trueContainer">
			<a href="javascript:void(0);" onclick="javascript:change_image('1');">
			<img src="image_assets/thumb_image1.jpg" border="1" alt="1"></a>
			<a href="javascript:void(0);" onclick="javascript:change_image('2');">
			<img src="image_assets/thumb_image2.jpg" border="1" alt="2"></a>
		</nobr>
	</div>
</div>
	<div class="hide_more_images">
		<a href="javascript:void(0);" onclick="javascript:hide_images();" class="hide_link">[X]</a>
	</div>
</div>

 

But when its shown again the contents within has disappeared. This only happening in IE.

 

Many thanks

[matfish]

The site is under development and password protected - I can open up for you to view source but didnt want everyone mocking the site.

 

 

[matfish]

Sorry to bump - any ideas anyone?

 

Many thanks

[ki]

function Div_Toggle(e) {
var dd = document.getElementById(e);
if (dd.style.display == "")
	dd.style.display = "none";
else
	dd.style.display = "";
}

[matfish]

Hi, thanks for the replies.

 

I did a bodge job and rather than hiding/showing the div, I resized it to show/hide and this works. Like this:

 

function show_images(){
//document.getElementById('img_list').style.display='block';
document.getElementById('img_list').style.height='130px';
document.getElementById('motioncontainer').style.height='95px';
document.getElementById('motiongallery').style.height='95px';
document.getElementById('hide_more_images').style.display='block';
document.getElementById('img_desc').style.display='block';
}
function hide_images(){
//document.getElementById("img_list").style.display='none';
document.getElementById('img_list').style.height='0px';
document.getElementById('motioncontainer').style.height='0px';
document.getElementById('motiongallery').style.height='0px';
document.getElementById('hide_more_images').style.display='none';
document.getElementById('img_desc').style.display='none';
}

 

Iv got another JS issue but ill post when ready in appropriate section.

 

Thanks again.