Question

OK so I’ve got an inbox style layout, with multiple messages with dynamic content for each message, I want to click on a link (Action Needed) and once its click it will open a drop down div containing an iFrame. This is the Javascript I am using:

<script language="javascript"> 

function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "<iframe src=\"http://m.quotesin.com/an.html\" width=\"100px\" frameborder=\"0\" height=\"20px\" allowtransparency=\"yes\" scrolling=\"no\"></iframe>";
    }


else {
        ele.style.display = "block";
        text.innerHTML = "<iframe src=\"http://m.quotesin.com/an.html\" width=\"100px\" frameborder=\"0\" height=\"20px\" allowtransparency=\"yes\" scrolling=\"no\"></iframe>";
    }
} 

</script>

And that display this:

<a id="displayText" href="javascript:toggle();"><div style="posistion:relative;"><img src="images/iframe.png" style="position:absolute;"><iframe src="http://m.quotesin.com/an.html" width="100px" frameborder="0" height="20px" allowtransparency="yes" scrolling="no"></iframe></div></a>

The images for design view are here… Before:

After:

But when there are more than one of these in the inbox the second wont open, is there a simple css show and hide for parent and child that will not share the same attributes that i can use, or any advice on where to go with this.

Thank you

Answer 1

AS far as Dynamic HTML is concerned, you can’t handle it without using Javascript or JQuery.
Secondly the Javascript you have written is using getElementById which only allows single element( Which has the same id specifed. ) selection.

Since you want to have same code to work with multiple Inbox, you need to have container and child selector that will help you to give same effect.
you need to use selector other than id which allows multiple selection.

Let me know if I am getting wrong.It would be more better if you can put code in JS fiddel.

Enjoy coding 😉