Hiding/Showing a Div with JavaScript.

[MrApples]

What action do I need to use to hide or show a div, and everything it contains. I know that it needs a seperate ID, and how to call the function, but I need to know the action.

My current way of going about this(without the action of course).

<script type="text/javascript">
hcur=0

function hidelast(){
switch(hcur){
case 0:
    hide div0
    break
case 1:
    hide div1
    break}
}

function header_main(){
if ( hcur!=0 ){
    hidelast()
    hcur = 0
    show div0}
}

function header_diff1(){
if ( hcur!=1 ){
    hidelast()
    hcur = 1
    show div1}
}
</script>

...

<div id="div0">
    <a href="url"><img onmouseover="header_main()"></a>
</div>
<div id="div1">
    <a href="url"><img onmouseover="header_diff1()"></a>
</div>

I'm asking for just the action on hiding/showing a div, but if anyone can see something obvious wrong with my logic please, point that out too, this is my first time writing JS. This is intended for about 5 divs.

[Lynne]

For you div code, you need to add the display style like "<div id=xxx style="display: none;">"

[MrApples]

So I would use...

document.getElementById('div1').style.display="none"

and

document.getElementById('div1').style.display="inline"

?

EDIT: This works for the hiding, but not for the showing. I tried visibility, same thing.

[Lynne]

This is the javascript I use:

PHP Code:

function collapse_news(id)
{
    var collapseText = document.getElementById('k' + id);
    var collapseBild = document.getElementById('pic' + id); 

    if (collapseText.style.display == 'none') {
          collapseText.style.display = 'block';
          collapseBild.src = '/forums/images/buttons/collapse_alt.gif';
    }
    else {
          collapseText.style.display = 'none';
          collapseBild.src = '/forums/images/buttons/collapse_alt_collapsed.gif';
    }
} 


And then this:

PHP Code:

<a href="javascript:collapse_news('220')"><img border=0 src="/forums/images/buttonsttd/collapse_alt.gif" id=pic220 alt="Show / Hide"> Date and Title of my news</a><div id=k220 style="display: none;">My News Hidden</div> 


[Analogpoint]

To hide, set display to "none" and to show, set display to "" (an empty string.)

[MrApples]

Thank you, I made this function modeled after that. However it's not working, is my syntax wrong?

hcur stores the id of the current element shown.
hx tells how many additional elements are included. (if theres more than one)

hcur + 'b' is the button, it changes images. hcur + '2', and hcur + '3' are additional elements that should be hidden/shown if needed.

function switchheader(id, x)
{
	if ( hcur != id ){
		document.getElementById(hcur).style.display = 'none';
		document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/' + hcur + '.png';
		if (hx != 1){
			document.getElementById(hcur + '2').style.display = 'none';
			if (hx == 3){
				document.getElementById(hcur + '3').style.display = 'none';}
		}
		hcur = document.getElementById(id);
		document.getElementById(hcur).style.display = 'block';
		document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/' + hcur + '_alt.png';
		if (x != 1){
			document.getElementById(hcur + '2').style.display = 'block';
			if (hx == 3){
				document.getElementById(hcur + '3').style.display = 'block';}
		}
		hx = x;
            }
}

	<img onMouseover="switcheader('main', 2)" src="/styles/7M-v1/new/main.png" />
       <img onMouseover="switcheader('projects', 1)" src="/styles/7M-v1/new/projects.png" /><td>

If anyone were to tell me what i'm doing wrong that would be greatly appreciated.

PS: Saw your message just now analog i'll make that change, however this code above isn't working at all.

[Analogpoint]

To begin with, hcur isn't defined in the function. I didn't get any further than that. But why make it that complicated? Put your two alternate headers within a div for each one, and then do something like this. Your two divs have id's headerone and headertwo.

function toggle_header()
{
      var el = document.getElementById('headerone');
      if (el.style.display == 'none')
      {
              el.style.display = '';
              document.getElementById('headertwo').style.display = 'none';
      }
      else
      {
              el.style.display = 'none';
              document.getElementById('headertwo').style.display = '';
      }
}

[MrApples]

That wouldn't work. I'm switching between about 6 divs, and it seems wasteful to check the state of each div when I can just use a variable.

I simplified it, sorry, kinda used to going overboard when coding (other language). Really don't like to use specifics.

var hcur='logo';
function switchheader(id){
	if ( hcur != id ){
		document.getElementById(hcur).style.display = 'none';
		document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '.png';
		document.getElementById(id).style.display = '';
		document.getElementById(id + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '_alt.png';
		if (hcur == 'logo'){
			document.getElementById('logo2').style.display = 'none';}
		if (id == 'logo'){
			document.getElementById('logo2').style.display = '';}
		hcur = id;
	}
}

I'll explain exactly what i'm trying to do.

• hcur is the last id shown, the one currently being shown.
• id the the new one in question.
• buttons switch to a alternate version when they are hovered on as well. Their id is the same as the div, with a b added on (id + 'b').

If the new id is not equal to the current id (why switch to the same?), then continue with the switch, else do nothing. Hide the current div, and switch the current button back to default. Then show the new div, and switch the new button to alternate.

If the past id was logo, hide the extra div. If the new id is logo, show the extra div. Set hcur to the new id as it is now the current, and end function.

[Analogpoint]

After a quick glance, it looks good. Try putting an alert('x'); after each line to identify where it chokes.

[MrApples]

Ok, I did that. My code exactly for that...

var hcur='logo';
function switchheader(id){
	alert('runs! id:' + id + ' hcur:' + hcur);
	if ( hcur != id ){
	alert('1');
		document.getElementById(hcur).style.display = 'none';
		alert('2');
		document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '.png';
		alert('3');
		document.getElementById(id).style.display = '';
		alert('4');
		document.getElementById(id + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '_alt.png';
		alert('5');
		if (hcur == 'logo'){
		alert('6');
			document.getElementById('logo2').style.display = 'none';}
			alert('7');
		if (id == 'logo'){
		alert('8');
			document.getElementById('logo2').style.display = '';}
			alert('9');
		hcur = id;
		alert('10');
	}
}

Apparently it is stopping at

		document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '.png';

Does JS lack failsafe checking? That image does not exist (haven't gotten to that yet), so is it just killing the function over it? Thank you a lot for this error finding command by the way.

PS: THe problem defiantly lies in those 2 lines, I commented them out and it works.