Cant make my toggle div function work

[elduderino]

hi,

Im new to javascript so please go easy on me if ive made a really dumb mistake ok!

I have a div that i want to show and hide with a push of a button.....so the user can toggle it on and off. I had quite a successful first attempt with my cursory knowlege of javascript and was quite happy with it but i can only either get the div to show and then not hide or vice versa....depending on which way round i put the logic!

So here it is...first the function then how im calling it further down:

    function show_chat() {
          var chat = document.getElementById('chat');
          if(chat.style.display = 'block') {
              chat.style.display = 'none';
          }
          else if(chat.style.display = 'none') {
              chat.style.display = 'block';
          }

      } 

<button onclick="show_chat(); return false;">show chat</button>
        <div id="chat_div"> 

Now what i want it to do is toggel on and off....what i'd really like to do is for the text of the button to change from show chat to hide chat. I have an idea how to do that and i know it involves getting to the text node and changing it from there.....please if anyone feels like enlightening me i'd be v.grateful!

As ive said in its current state it only turns the chat off and then i cant toggle it back on!

Any ideas?

Thanks

[Kravvitz]

Your problem is that "=" is an assignment operator. Inside the conditionals you want the equality operator "==".

I recommend that you use 2 to 4 space indentation instead of 8-space-width tab characters. Many programming editors have an option that allows you to make it insert a certain number of spaces with the tab key.

To get the text, which is in the first child node of the <a>, you can use

chat.firstChild.nodeValue

To learn more about the Document Object Model (DOM) check these out:
Rough Guide to the DOM
JavaScript tutorial - W3C DOM introduction
http://www.quirksmode.org/js/contents.html#dom
http://www.brainjar.com/
http://developer.apple.com/internet/...ent/dom2i.html
http://developer.mozilla.org/en/docs/DOM:document
http://developer.mozilla.org/en/docs..._DOM_Reference
http://digital-web.com/articles/form...d_the_w3c_dom/
http://www.w3.org/DOM/
Mozilla JavaScript and DOM Reference

[elduderino]

HI Kravvitz,

thats great, thanks for the reply and the links

I'll check them out today as its about time i learn javascript.

[elduderino]

arrghh...no that doesnt seem to work either....it only toggles from on to off and not back on:

function show_chat() {
          var chat = document.getElementById('chat');
          if(chat.style.display == 'block') {
              chat.style.display == 'none';
          }
          else if(chat.style.display == 'none') {
              chat.style.display == 'block';
          }
} 

Ive tried it round all ways but it doesnt work! Any ideas?

Also, so to get to my text i would do chat.firstChild.showChat ?

[siteguru]

== as conditional operators ... = as assignments

function show_chat() {
          var chat = document.getElementById('chat_div'); // It is NOT 'chat' - your div is called 'chat_div'!!
          if(chat.style.display == 'block') {
              chat.style.display = 'none';
          }
          else if(chat.style.display == 'none') {
              chat.style.display = 'block';
          }
}

You can also make this more reusable ...

var ie = (document.all) ? true : false;
var moz = (document.getElementById) ? true : false;

function toggleDiv (divID) {
	if (ie) {
		document.all[divID].style.display = (document.all[divID].style.display == "block") ? "none" : "block";
	}
	if (moz) {
		document.getElementById(divID).style.display = (document.getElementById(divID).style.display == "block") ? "none" : "block";
	}
}

<button onclick="toggleDiv ('chat_div'); return false;">show chat</button>
        <div id="chat_div">

[elduderino]

Hi Ian,

thanks for the reply Right got you now about those operators....i didnt read what kravittz posted closely enough!

Right your updated version of my original.....however the re-usable code you posted does! I'd love to know why mine doesnt work! I cant see why...it still just toggles from on to off but then not back on. The div i want to turn on and off is called chat and not chat_div...i kinda didnt post enough of the code earlier, sorry!

Also i understand that you've included the extra code because a certain version of IE doesnt like the getElementById. Which version did IE start supporting it?

[funkdaddy]

you code doesn't work b/c the div's initial style.display equals nothing. if you throw an alert(chat.style.display) at the beginning of your function you'll see that it equals "". You would have to do:

          if (chat.style.display != 'block') {
              chat.style.display = 'block';
          }else{
              chat.style.display = 'none';
          }

The div attributes accessed by javascript aren't inherited from CSS. If that makes sense

[elduderino]

Right right thanks funkydaddy! I dont know to access the text node now...ive tried chat.firstChild.showChat but that doesnt seem to work...i want to change it from show chat to hide chat

[Kravvitz]

*chuckles* "nodeValue" is the name of the property. I did not mean that you should change the string to that format.

IE5+ supports document.getElementById.

Really, it would be best for you to create the button with JavaScript.
Here's the function to toggle the text and the display property of the <div>. Give the button an ID, e.g. "chatButton".

if(!document.getElementById && document.all) { //IE4 support
  document.getElementById = function(id) { return document.all[id]; }
}
function show_chat() {
  var chat = document.getElementById('chat');
  var chatButton = document.getElementById('chatButton');
  if(chat.style.display == 'none') {
    chat.style.display = 'block';
    chatButton.firstChild.nodeValue = 'Hide Chat';
  } else {
    chat.style.display = 'none';
    chatButton.firstChild.nodeValue = 'Show Chat';
  }
}

You can also make this more reusable ...

var ie = (document.all) ? true : false;
var moz = (document.getElementById) ? true : false;

Doing it like that is very silly. IE is not the only browser to support document.all and all modern browsers with JavaScript support also support DOM1 including document.getElementById.

[elduderino]

yes chuckle away Mr Kravvitz.......I do, however feel like a bit of an idiot as i read a few chapters of Dom scripting today and it made all this alot more clear.

Anyways it works a treat now. Thanks for all your help

[siteguru]

@Kravvitz -> I just butchered some old code from the days of Netscrape 4 for speed.