triggering multiple events with single onClick

Question

I have a iframe on my web page. On anchor click a pdf file opens in the iframe . I have provided button by clicking which I close/display:none the iframe . I want the iframe to show again when the anchor is clicked. The click of the anchor should show the iframe and open the pdf in that iframe . Please help me how to do that.

I have tried the following:

function CloseWindow() {
var ifr = document.getElementById("ifrlyric") 
ifr.style.display='none' }

function OpenWindow() {
var ifro = document.getElememtById("ifrlyric")
if (ifro.style.display=='none') { ifro.style.display='block' }   }

<a href="#" onClick=" window.lyrics.location='mypage.pdf';  ifrlyric.style.display=block;   return false;">Mypage</a>

The anchor is opening the pdf in the iframe first time and the click button hides it. But again when the anchor is clicked the iframe is not showing.

Answer 1

Try to do a third function such as

function toggleState() {
    if(document.getElementById('ifrlyric').style.display == 'none') {
        window.lyrics.location='mypage.pdf'; // And I suggest moving this to OpenWindow
        OpenWindow ();
    } else {
        CloseWindow ();
    }
}

And then call it in your onClick :

<a href="#" onClick="toggleState();">Mypage</a>

EDIT

Re-reading your code I can see a typo, you wrote getElememtById instead of getElementById

Answer 2

The function "OpenWindow" has the only mission to show the iframe, so I suggest to simply:

 function OpenWindow() {
    var ifro = document.getElememtById("ifrlyric")
     ifro.style.display='block'    }

Answer 3

Since you tagged jquery, I'll say just use the jquery toggle function:

<a href="#" onClick="setLocation();">Mypage</a>

<script>
    function setLocation() {
        window.lyrics.location='mypage.pdf';
        $('#ifrlyric').toggle();
</script>

You didn't post enough code for me to know if this is exactly right, but it should at least be pretty close.