How to apply CSS style to all elements with same ID using one button?

Question

My idea was to create a button to hide/show all hidden text (Hide by highlighting the text in black, show by making the background color of the text transparent). But the codes,

Answer 1

Your code is only every going to update one element, because getElementById will only ever return one element (because, as we've said, id is supposed to be unique). If you need to mark multiple elements as related use a class instead. Here is a working example using class, JavaScript:

function change() {
    var test = document.getElementById("button1");
    var els = document.getElementsByClassName("p2");
    if (test.value == "Hide Spoiler") {
        test.value = "Open Spoiler";
        for (var i=0; i<els.length; i++) {
            els[i].style.backgroundColor = "black";
        }
    } else {
        test.value = "Hide Spoiler";
        for (var i=0; i<els.length; i++) {
            els[i].style.color = "black";
            els[i].style.backgroundColor = "transparent";
        }
    }
}

HTML:

<input onclick="change()" type="button" value="Hide Spoiler" id="button1"></input>
<br>
<span class="p2">Hidden text</span> Test for more <span class="p2">Hidden text</span> test again. <span class="p2">Hidden text</span>

If you need it to work in browsers too old for getElementsByClassName, try using jQuery. It makes this sort of thing lots easier

Answer 2

<input onclick="change()" type="button" value="Open Curtain" id="button1"/>
<br/>
<span class="p2">Hidden text</span> Test for more <span class="p2">Hidden text</span> test again. <span class="p2">Hidden text</span>

then the jquery:

function change() {
    var test = document.getElementById("button1");
    if (test.value == "Hide Spoiler") {
        test.value = "Open Spoiler";
        $('.p2').css('background-color','black')

    }
    else {
        test.value = "Hide Spoiler";
        $('.p2').css('background-color', 'transparent')

    }
}

I've tested it

Answer 3

id is unique, so it's not valid to have multiple instances [http://www.tizag.com/cssT/cssid.php] - you could however use a class and then select all instance with $(".className") (assuming jQuery). This answer How to getElementByClass instead of GetElementById with Javascript? contains a lot of helpful pointers

Answer 4

Use a class instead of an id. Then use document.getElementsByClassName("p2") which will return an array of the matching elements and loop over them.

Answer 5

I oppose the Same ID concept... But Try like below will be a answer to your question....

Fiddle Example : http://jsfiddle.net/RYh7U/65/

CSS

.mask
{
color : red;
}

Javascript :

function change()
{
 var elements = document.getElementById("p2").parentNode.getElementsByTagName("span");
    for(var i=0; i<elements.length; i++)
      elements[i].className = "mask";
}

Answer 6

As others have said, do not use the same id more than once on a single page. Instead, use a class name or data attributes. And since you marked your question with jQuery:

function change()
{
    var test = document.getElementById("button1");
    if (test.value=="Hide Spoiler") 
    {
        test.value = "Open Spoiler"; 
        $('.className').css('background-color','transparent');
    }
    else 
    {
        test.value = "Hide Spoiler"; 
        $('.className').css('background-color','transparent');
        $('.className').css('color','black');
    }
}

If you're going to use jQuery, I'd also recommend using the button's click event like such:

$('#button1').click(function() {
  ...
});