How can I get my Show/Hide Effect to resize my iFrame? (Example Inside)

[MavisBecon]

I've got an Iframe displaying my html page that contains
a Show/Hide element javascript effect.

Problem is the iFrame is loading the child page but not adjusting it's size upon using the show/Hide Div effect.

See my example: http://www.taskmotivator.com/Iframe_test.html

Notice that when "page 2" is clicked the parent page isn't resizing to account for the longer paragraph of the child.

I've used relative positioning, but their seems to-be a lack of communication.

[rtrethewey]

"auto" is invalid for the height setting of the <iframe> tag (and HTML tags in general). <iframe>s do not rely on the content of the page they show. They require explicit width and height settings - either in pixels or as a percentage.

My advice would be to use another mechanism to show the content. Off the top of my head, I'd use AJAX to load the external page into memory, extract whatever content you want to display and insert it into a normal <div>, which would automatically expand vertically to accommodate the content, using the innerHTML property. Good luck!

[MavisBecon]

I had thought that their would be a way of connecting the Iframe script up with the Show/Hide javascript:

<script type="text/javascript">
function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

</script>

...so it's triggered when the Div is clicked?

if (document.getElementById(id).style.display == "block") {
        document.getElementById("main").height +=20) + "px";
    else
        document.getElementById("main").height -=20px;
}
}

Doesn't really work?
I'll look into an Ajax alternative to iFrames, but it's sorta crucial that i use Iframes.

Thanks