Set css of multiple divs with same id

Question

I have a reveal presentation in an iframe. Each slide has a div with an audio player in in and the divs id is "narration".

I have a button outside the frame that is used to hide/show this div. The problem is that it only does this for the first slide and not the rest.

EDIT : This seems to hide the divs :

function checkAudio() {
        if (document.getElementById('cb1').checked) {
var y = document.getElementById('ppt').contentWindow.document.getElementsByClassName('narration');
var i;
for (i = 0; i < y.length; i++) {
  y[i].style.display = 'none';
}
        } else {
var y = document.getElementById('ppt').contentWindow.document.getElementsByClassName('narration');
var i;
for (i = 0; i < y.length; i++) {
  y[i].style.display = 'block';
        }
    }
 }

HTML in iframe (There is one for each slide) :

<div id="narration"><p align="middle">
    <audio controls="" preload="none">
        <source src="mp3/2.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio></p>
</div>

JS (outside of iframe):

 function checkAudio() {
     if (document.getElementById('cb1').checked) {
         document.getElementById('ppt').contentWindow.document.getElementById('narration').style.display = 'none';
     } else {
         document.getElementById('ppt').contentWindow.document.getElementById('narration').style.display = 'block';
     }
 }

Answer 1

If you want to show a specific element using a button, you should use a specific ID. If you want to show all items using a single button you should use classes. You could also use classes to show a specific element eg: The 5th button will show the 5th element but this is not a good style.

Answer 2

When the site in the iframe loads the next frame, your code doesn't know to hide the div it presents again. You need an event to process on.

You need to poll the id so that if it shows up again, you can hide it. See: iframe contents change event?

Answer 3

After changing your IDs to classes ( read here why ), you need to update your javascript code to handle the multiple divs via a foreach loop.

function checkAudio() {
    var narrationDivs = document.getElementById('ppt').contentWindow.document.getElementsByClassName('narration');
    var newDisplay = "block";

    if (document.getElementById('cb1').checked) {
        newDisplay = "none";
    }

    narrationDivs.forEach(function(div) {
        div.style.display = newDisplay;
    });
}

In order to have the code run again when your iframe changes, you need to update your iframe changing function:

function setURL(url){ 
    document.getElementById('ppt').src = url; 
    checkAudio(); // Just run the function again!
}

Answer 4

 function checkAudio() {
        if (document.getElementById('cb1').checked) {
var y = document.getElementById('ppt').contentWindow.document.getElementsByClassName('narration');
var i;
for (i = 0; i < y.length; i++) {
  y[i].style.display = 'none';
}
        } else {
var y = document.getElementById('ppt').contentWindow.document.getElementsByClassName('narration');
var i;
for (i = 0; i < y.length; i++) {
  y[i].style.display = 'block';
        }
    }
 }

Answer 5

You might also want to check out the audio-slideshow plugin that allows to play separate audio files for each slide and fragment. If your main need is this, the plugin should do the job for you.

You can find a demo here and the plugin here . There is also the slideshow-recorder plugin that allows you to record your narration.

Asvin