Toggle iframe height/width

Question

So I would like to make a toggle button for 2 different sizes of my frame.

I was able to make 2 simple buttons for resizing the iframe with these simple functions

function changeframe_big()
{
    document.getElementById('frame').width = 1000;
    document.getElementById('frame').height = 600;
}



function changeframe_small()
{
    document.getElementById('frame').width = 640;
    document.getElementById('frame').height = 360;
}

(Please ignore the ratios, I'm just testing it.)

And the buttons ...

<button id="change_big" onClick="changeframe_big()">BIG</button>
<button id="change_small" onClick="changeframe_small()">SMALL</button>

So, and basically I would like to make only one button, which would toggle between these two sizes.

I'm somehow struggling to get this done.

I appreciate any help.

Thank you.

Answer 1

assuming that your given code works, you could do the following:

your HTML:

<button id="toggle" onClick="toggle()">Toggle</button>

your JS:

var small=false;
function toggle()
{
    if(small){
        document.getElementById('frame').width = 1000;
        document.getElementById('frame').height = 600;
        small=false;
        }
    else{
        document.getElementById('frame').width = 640;
        document.getElementById('frame').height = 360;
        small=true;
        }
}

basically what this code does is it checks if "#frame" is small or big (assumed that the default size is big) , and then toggles it to the other size.