Javascript -> CSS (display:none to display:block)

Question

I have 3 divs + 3 hidden divs. I want to click on "service1" and edit "display:block" in "toggle1".

The HTML:

<div id="service1" onclick="changeService('toggle1')></div>
<div id="service2"></div>
<div id="service3"></div>
<br><br>
<div id="toggle1"></div>
<div id="toggle2"></div>
<div id="toggle3"></div>

The CSS:

#toggle1, #toggle2, #toggle3 {display:none}

The Javascript:

function changeService(this) {
    this.style.display = "block";
}

Hope I explained myself well enough so you guys can understand. What am I doing wrong?

Thanks in advance :)

dfsq · Accepted Answer · 2015-03-22 19:58:14Z

2

You are passing a string into function, not an object. You can use document.getElementById method to get corresponding div element:

function changeService(id) {
    document.getElementById(id).style.display = "block";
}

answered Mar 22, 2015 at 19:58

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

jbarradas Over a year ago

didn't work. you put "id" as an example or is that really id?

jbarradas Over a year ago

ok, I got it to work! thanks to you! :) BTW, why if I put "id" it works, and "this" does not?

dfsq Over a year ago

Because this is a reserved word, and it can't be used in such context.

jbarradas Over a year ago

Ok. Thanks for the explanation! Will put right answer as soon as possible.

Roland Peelen · Accepted Answer · 2015-03-22 20:30:54Z

1

I think it would be best to use CSS classes.

So go:

#toggle1, #toggle2, #toggle3 {display:none}
#toggle1.active, #toggle2.active, #toggle3.active{display: block}

And then:

function changeService(id) {
    document.getElementById(id).setAttribute("class", "active");
}

Then you can keep view and logic separated and easily add more style if necessary. Try never to change your CSS in Javascript. Better add classes like this to keep things clear.

https://jsfiddle.net/t74tmu7r/2/

edited Mar 22, 2015 at 20:30

answered Mar 22, 2015 at 20:09

Roland Peelen

446 bronze badges

1 Comment

jbarradas Over a year ago

Thanks for the tip! Thanks to you and some more research I'm getting where I want jsfiddle.net/lordfox/n4dn9jur Now, I just need some way to find any "toggle active" div, and IF one is found, setAttribute("class", "toggle hidden"). But I will formulate another question for it.

jrod · Accepted Answer · 2015-03-22 20:30:24Z

0

first of all place your script file before the closing body tag to make sure all DOM elements are loaded then use this code:

function changeService(id){
  var elem = document.getElementById(id);
  elem.style.display = "block";
}

then in the div tag with a class name 'service1' do this:

<div id="service1" onClick="changeService('toggle1');"></div>

that should do the job.

answered Mar 22, 2015 at 20:30

jrod

661 silver badge6 bronze badges

1 Comment

jbarradas Over a year ago

Thanks for the tip! Thanks to you and some more research I'm getting where I want jsfiddle.net/lordfox/n4dn9jur Now, I just need some way to find any "toggle active" div, and IF one is found, setAttribute("class", "toggle hidden"). But I will formulate another question for it.

Collectives™ on Stack Overflow

Javascript -> CSS (display:none to display:block)

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related