Display a div child with same id via javascript

Question

I have this code:

<div id="parent">
   <div> 
      <div id="Container1" >
         <div id="Container1">  
         <object>.....</object>
         </div>
      </div>
   </div>
   <div onclick="appear()" id="child-2">
      <div id="child-of-child"></div>
   </div>
</div>

I've put the CSS bellow to stop display the first child of div#parent and I'm trying to display with a reaction via JavaScript.

CSS

div#parent div:first-child div:first-child {
display: none;
}

How can I display the the second div#Container1 also? Because if I use the code bellow, it displays only the first div#Container1.

Javascript

<script type="text/javascript">
function appear() {
document.getElementById("Container1").document.display="block";
}
</script>

Thanks in advance.

Elements can't have duplicate IDs. Please see http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids - javascript will hence only select the first element. Think about using classes instead. — RichieAHB, Sep 16 '14 at 09:44
I aggree, but I don't have permission to change that. In that case is there any solution? Otherwise I could fix it very easily. — Gregory Ch, Sep 16 '14 at 09:45
@richieahb Just for trivia, technically they can. You can select `$('[id=Container1]').eq(1)` to get the second `#Container1` element (jQuery). I'm **obviously** not suggesting that you **should** do this, just that you **can** :-) — Joe, Sep 16 '14 at 09:46
Ok, but i don't know to handle JQuery, how could I write it instead of this? — Gregory Ch, Sep 16 '14 at 09:48
@GregoryCh - I would suggest trying to change this or otherwise selecting it as @Joe has mentioned. If you remove this `.eq(1)` you will have a jQuery group of both objects. — RichieAHB, Sep 16 '14 at 09:49
@richieahb Nobody should **ever** use the code I posted, it's just there because it works, not because it should be used. Duplicate IDs is flat out #doingitwrong ;-) — Joe, Sep 16 '14 at 09:54
@GregoryCh setting "display: block" on a div with no other styles or classes will do precisely nothing as a div is a block level element. — Ben Robinson, Sep 16 '14 at 10:02

RichieAHB · Answer 1 · 2014-09-16T10:26:35.810

0

If you can't change the IDs (and I suggest you try), you can use. This is only relevant if both divs were not set to display block beforehand.

function appear() {

    var containers = [];

    var parent = document.getElementById("Container1");

    containers.push(parent);
    containers.push(parent.children[0]);

    for (var i = 0; i < containers.length; i++) {
        containers[i].style.display = "block";
    }
}

http://jsfiddle.net/wxsgpeuk/2/

Note this is purely to get it done in your situation as Joe mentioned in the comments: duplicate IDs is just doing it wrong.

edited Sep 16 '14 at 10:26

answered Sep 16 '14 at 09:58

RichieAHB

2,030
2
20
33

I want to use it in that case: `
` So I write it like this? ``
– Gregory Ch Sep 16 '14 at 10:04
Just wrap the code in the appear function. See the updated fiddle. – RichieAHB Sep 16 '14 at 10:09
I tried that, but it displays only the first div#Container1. I used this CSS code to hide it (because I wanted to hide the anonymous div also) `div#parent div:first-child div:first-child { display: none; }` – Gregory Ch Sep 16 '14 at 10:25
It doesn't - see the edited fiddle. It's just because the other div is inside it that it isn't clear. – RichieAHB Sep 16 '14 at 10:27
This is the real code. I cut some useless lines. `

` – Gregory Ch Sep 16 '14 at 10:33

sabithpocker · Accepted Answer · 2014-09-16T10:22:22.993

If you have access to CSS change it to:

div#parent > div:first-child > div:first-child {
display:none
}

:first-child does not specify its immediate first child, you can use > to specify that and avoid second Container1 from using that style rule.

With this change you can use your existing javascript. and remove id from the child div at a later time without affecting this.

http://jsfiddle.net/oz5g3bxs/

And of course, use unique id as already mentioned by everyone

Display a div child with same id via javascript

2 Answers2