Question

I CANNOT use jQuery on this project (client policy).

My html code is:

<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" href="javascript:toggle();">show answer</a>  

Javascript code is:

    function toggle() {
            var ele = document.getElementById("toggleText");
            var text = document.getElementById("displayText");
            if(ele.style.display == "block") {
                ele.style.display = "none";
                text.innerHTML = "show";
            }
            else {
                ele.style.display = "block";
                text.innerHTML = "hide";
            }
    }   

I cannot get this code to work.
Any suggestions to resolving this?

Answer 1

Here you need to pass two references to your toggle function, one to the target, and one to itself:

<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" href="javascript://" onclick="toggle('dvAnswer<%#Eval("num")%>',this);">show answer</a>

(plus, it’s is good practice to use onclick, not href for inline javascript)

Then pass these references to your function:

function toggle(target,me) {
            var ele = document.getElementById(target);
            var text = me
            if(ele.style.display == "block") {
                ele.style.display = "none";
                text.innerHTML = "show";
            }
            else {
                ele.style.display = "block";
                text.innerHTML = "hide";
            }
    }