Javascript hiding and showing dynamic content of a div

Question

Currently I hide and show the content of a div like this:

var header = null;
        var content = null;
        var mainHolder = null;
        var expandCollapseBtn = null;
        var heightValue = 0;

        header = document.getElementById("header");
        content = document.getElementById("content");
        mainHolder = document.getElementById("mainHolder");
        expandCollapseBtn = header.getElementsByTagName('img')[0];

        heightValue = mainHolder.offsetHeight;

        header.addEventListener('click', handleClick, false);
        mainHolder.addEventListener('webkitTransitionEnd',transitionEndHandler,false);

        function handleClick() {
            if(expandCollapseBtn.src.search('collapse') !=-1)
            {
                mainHolder.style.height = "26px";
                content.style.display = "none";
            }
            else
            {
                mainHolder.style.height = heightValue + "px";
            }
        }

    function transitionEndHandler() {
        if(expandCollapseBtn.src.search('collapse') !=-1)
        {
            expandCollapseBtn.src = "expand1.png";
        }
        else{
            expandCollapseBtn.src = "collapse1.png";
            content.style.display = "block";
        }
    }

This is fine if the content is static, but I'm trying to populate my div dynamically like so.

This is called from an iphone application and populates the div with a string.

var method;

            function myFunc(str)
            {
                method = str;
                alert(method);
                document.getElementById('method').innerHTML = method;
            }

I store the string globally in the variable method. The problem I am having is now when I try expand the div I have just collapsed there is nothing there. Is there some way that I could use the information stored in var to repopulate the div before expanding it again? I've tried inserting it like I do in the function but it doesn't work.

Does anyone have any ideas?

to replicate:

Here is the jsfiddle. jsfiddle.net/6a9B3 If you type in text between here

it will work fine. I'm not sure how I can call myfunc with a string only once in this jsfiddle, but if you can work out how to do that you will see it loads ok the first time, but when you collapse the section and attempt to re open it, it wont work.

If the only way to fix this is using jquery I dont mind going down that route.

Answer 1

is it working in other browsers?

can you jsfiddle.net for present functionality because it is hard to understand context of problem in such code-shoot...

there are tonns of suggestions :) but I have strong feeling that

 document.getElementById('method') 

returns wrong element or this element not placed inside mainHolder

update : after review sample in jsfiddle

feeling about wrong element was correct :) change 'method' to 'info'

document.getElementById('method') -> document.getElementById('info')

Answer 2

我想你想在myFunc中使用document.getElementById（' content '）而不是document.getElementById（'method'）。

Answer 3

I really see nothing wrong with this code. However, a guess you could explore is altering the line content.style.display = "none";

It might be the case that whatever is displaying your html ( a webview or the browser itself) might be wiping the content of the elemtns, as the display is set to none