JS Toggle (display) text the simplest way

Question

I'm trying toggle to change visibility(display) the text in next way http://jsfiddle.net/xL8hyoye/ . It doesn't work, but should work.

HTML code here:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

JS code here:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

(code from this source http://blog.movalog.com/a/javascript-toggle-visibility/)

Solved when replacing :

function toggle_visibility(id) {

By :

toggle_visibility = function(id) {

(thanks to Zakaria Acharki).

Reason of this is visible variable area and, in first case - JSFiddle extern libraries settings(after set no library you need to set 'No wrap in head'). As amit.rk3 said here the similar theme

Inline event handler not working in JSFiddle

And here the proof(js and html code were not changed, only 'No wrap in head' settings) http://jsfiddle.net/xL8hyoye/3/

duplicate of [http://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle](http://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle) — Amit.rk3, Jul 12 '15 at 19:42
"I'm trying toggle to change visibility(display) the text in next way", what's that "next way"?? — Sudhansu Choudhary, Jul 12 '15 at 19:48
@Amit.rk3 this is not a duplicate of the question whose link you have provided! — Sudhansu Choudhary, Jul 12 '15 at 19:50
@SudhansuChoudhary OP updated the question. Check the first fiddle he posted. [http://jsfiddle.net/xL8hyoye/](http://jsfiddle.net/xL8hyoye/) — Amit.rk3, Jul 12 '15 at 19:58

score 2 · Accepted Answer · answered Jul 12 '15 at 19:38

2

Update your function declaration, See the working Fiddle :

toggle_visibility = function(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

answered Jul 12 '15 at 19:38

Zakaria Acharki

66,747
15
75
101

Can you please explain why it doesn't work on the first click? And how the declaration of the function is fixing this issue? – Sudhansu Choudhary Jul 12 '15 at 19:46
Here i'll try to find the answer about two clicks http://stackoverflow.com/questions/31372615/js-one-click-tooglenot-two-clicks-default-value-of-toogled-element. What about reason of the declaration - here some information about that http://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfidd‌le – Artem.Borysov Jul 12 '15 at 21:10
1

Hi bro Take a look [Here - 1](http://stackoverflow.com/questions/587954/best-practices-for-declaring-functions-inside-jquery-ready-function) and [Here - 2](http://www.sitepoint.com/5-ways-declare-functions-jquery/) also [Here - 3](http://stackoverflow.com/questions/8480756/jquery-function-declaration-explanation) that may help you. – Zakaria Acharki Jul 12 '15 at 21:19

Bartłomiej T. Listwon · Answer 2 · 2015-07-12T21:13:00.017

You need to set the initial CSS display value of the div element (by default it is set to block, but not accessible to JS).

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" style="display: block;">This is foo</div>

or check if style.display is empty

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block' || e.style.display == '')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

The same code wouldn't work in jsfiddle without undefault option 'no wrap in head', it was the reason http://jsfiddle.net/xL8hyoye/6/ and http://jsfiddle.net/xL8hyoye/7/ compare — Artem.Borysov, Jul 12 '15 at 20:46
but what if you remove ' style="display: block;" from this snippet example. Would that work? — Artem.Borysov, Jul 12 '15 at 20:48

JS Toggle (display) text the simplest way

2 Answers2