javascript/css: change display property

Question

I want to change display without documentGetElementById if possible but the following is not working. html

<a href="javascript:void();" onclick="toggleFaq('1')">Instructions</a><div id="showfaq1" style="display:none;">Open Box.  Remove device. </div>

javascript:

function toggleFaq(faqid) {
//alert(faqid);
var divname = "showfaq"+faqid;
//alert(divname);
divname.style.display="block";
}

Can anyone tell me what I am doing wrong?

Thank you.

that's not possible. Either use getElementById, getElementByTagName etc. or jQuery. — giorgio
– giorgio, Commented Sep 20, 2013 at 11:36
Why do you want to avoid using a good way of doing this and instead using implicitly bound inline js? — David Barker
– David Barker, Commented Sep 20, 2013 at 11:36
If you provide more information on why you don't want to use getElementById, you would get better suggestions. — Harry
– Harry, Commented Sep 20, 2013 at 11:39
I guess I misremembered that it was possible to do this w/o getElementById. Just wanted to do with as little js as possible. Stand corrected. Thanks! — user1904273
– user1904273, Commented Sep 20, 2013 at 11:42

loler · Accepted Answer · 2013-09-20 11:52:48Z

3

I can't get why you do not want to use getElementById, but...

If you have elements in order like this

<a href="javascript:void();" onclick="toggleFaq('1')">Instructions</a>
<div id="showfaq1" style="display:none;">Open Box.  Remove device. </div>
<a href="javascript:void();" onclick="toggleFaq('2')">Instructions</a>
<div id="showfaq2" style="display:none;">Open Box.  Remove device. </div>
...
<a href="javascript:void();" onclick="toggleFaq('N')">Instructions</a>
<div id="showfaqN" style="display:none;">Open Box.  Remove device. </div>

You may use

<a href="javascript:void();" onclick="toggleFaq(this)">Instructions</a>

function toggleFaq(obj) {
   obj.nextElementSibling.style.display = 'block';
}

edited Sep 20, 2013 at 11:52

answered Sep 20, 2013 at 11:43

loler

2,5971 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yury Tarabanko Over a year ago

I'd better go for nextElementSibling or check for nextSibling.nodeType === 1

d.raev Over a year ago

better use setAttributes(), obj.nextSubling.setAttribute('style', 'display:block;'). this way you can change class or what ever..

pawel · Accepted Answer · 2013-09-20 11:42:54Z

In your code divname is a variable containing a string "showfaq1", which doesn't have style property.

To change the style of an element you need a reference to that element which you can obtain using document.getElementById(divname):

function toggleFaq(faqid) {
    //alert(faqid);
    var divname = "showfaq"+faqid;
    //alert(divname);
    document.getElementById(divname).style.display="block";
}

If you have an allergy to document.getElementById, you may use document.querySelector('[id="' + divname +'"]');, but its support is not as good as the former, and it's slower.

pawel · Accepted Answer · 2013-09-20 12:26:11Z

0

Posting a separate answer as it has no impact on my previous one. But you could make the base mechanism without JS at all, then use one of the JS-based solutions to fix it in broken browsers if needed:

HTML

<a href="#showfaq1">Instructions</a>
<div id="showfaq1">Open Box.  Remove device. </div>

CSS

a + div { display:none; }
a:focus + div, a + div:target { display:block; }

DEMO

answered Sep 20, 2013 at 12:26

pawel

37.1k7 gold badges59 silver badges54 bronze badges

Collectives™ on Stack Overflow

javascript/css: change display property

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related