Path: csiph.com!newsfeed.hal-mli.net!feeder3.hal-mli.net!newsfeed.hal-mli.net!feeder1.hal-mli.net!aioe.org!.POSTED!not-for-mail
From: Cezary Tomczyk <cezary.tomczyk@gmail.com>
Newsgroups: comp.lang.javascript
Subject: Re: Simple question about div show or hide
Date: Wed, 09 Jan 2013 22:44:51 +0100
Organization: Aioe.org NNTP Server
Lines: 68
Message-ID: <kckoce$v6$2@speranza.aioe.org>
References: <b7e6883d-fe02-41ca-b4e8-89cfaccde7f6@googlegroups.com>
NNTP-Posting-Host: zYd0PXwpR9QMvAmoEDGsiw.user.speranza.aioe.org
Mime-Version: 1.0
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit
X-Complaints-To: abuse@aioe.org
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20130107 Thunderbird/17.0.2
X-Notice: Filtered by postfilter v. 0.8.2
Xref: csiph.com comp.lang.javascript:18041

W dniu 2013-01-09 21:54, justaguy pisze:
> Hi,
>
> Problem with the following code for simple Div show or hide: Second
> click is not possible.  Tested against Firefox 17 and Chrome 23 (both
> on Windows 7).
>
> What's wrong?  Am I missing something obvious?
>
> Please note, I'm using double ## here instead of a single # because
> the server side scripting language, ColdFusion or Railo that I'm
> using, consider # as a special symbol, so, I'm using double ## to
> escape to one.
>
> <div><a href="##sh" onclick="if
> (document.getElementById('t').style.display='none'){document.getElementById('t').style.display='inline';}else{alert('2nd
> test click
> called');document.getElementById('t').style.display='none';}">test
> div show/hide</a></div>
>
> <div id="t" style="display:none">test data</div>

I would write in that way*:

(note: needed to remove <> due to problem with post of this message)

[HTML]

a href="#somewhere" id="mylink" style="display:none" Test /a

[JavaScript]

var switchView, elm,
     b = true;

elm = document.getElementById('mylink');

switchView = function(e){
     if (b) {
         elm.style.display = 'block';
     } else {
         elm.style.display = 'none';
     }
     b = !b;

     if (e.preventDefault) {
         e.preventDefault();
     }
     if (window.event) {
         window.event.returnValue = false;
     }
     return false;
};

if (window.addEventListener) {
     el.addEventListener('click', switchView, false);
} else {
     el.attachEvent('onclick', switchView);
}

* 1) assuming that code is loaded when DOM is ready
   2) this is very simple example and probably could be improved in a 
many ways
   3) it's better to use 'class' and switch classes instead of inline styles

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/