Click here to Skip to main content
15,919,931 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
JavaScript

I've master page in that have contentplaceholder.

And derived the content pages from that,
on page load the div tag must be minimised and on click of the arrow symbol its div tag's contents should be visible.

this is the code i've written in content page.
ASP.NET
<div  runat="server" class="accordion">
                <div  runat="server" class="accordionHeader">Resource Mangement 
                <a href="#"  önclick="ExpandOrCollapsePanel('ResMgmt');">
                <img id="imgNext" alt="Expand" src="Images/expand.GIF" align="right"/></a></div>
                    <div id="ResMgmt" name="ResMgmt"  runat="server" class="accordionContent" style="display:none">
                            <div class="accordionHeader"  runat="server">Add/Edit Users <a href="#"  önclick="ExpandOrCollapsePanel('addUsr');"><img id="img1" alt="Expand" src="Images/expand.GIF" align="right"/></a></div>
                                <div id="addUsr"  runat="server" class="accordionHeader" style="display:none"></div>
                            </div>
                    </div>

And on click of the image hyperlink a java script will be made run
the javascript code looks like,

JavaScript
function ExpandOrCollapsePanel(id, panelBar) {
    var panel = document.getElementById(id);
    if (!panelBar) {
        panelBar = event.srcElement;
    }

    if (panelBar) {
        while (typeof panelBar.onclick != "undefined"
               && String(panelBar.onclick).indexOf("ExpandOrCollapsePanel") == -1) {
            panelBar = panelBar.parentElement;
        }

        if (!panelBar.getElementsByTagName("div")[0]) {
            panelBar = panelBar.parentElement;
        }
        
        var isExpanded = panelBar.expanded ? panelBar.expanded : panelBar.Expanded;
        if (isExpanded == "True") {
            eval((panelBar.expanded ? "panelBar.expanded " : "panelBar.Expanded ") + " = \"False\"");
            if (panel) {
                panel.style.display = "none";
            }
        } else {
            eval((panelBar.expanded ? "panelBar.expanded " : "panelBar.Expanded ") + " = \"True\"");
            if (panel) {
                panel.style.display = "block";
            }
        }
    }
}


in this code i'm facing the problem that "panel" variable is showing 'null' on runtime when i try to debug the code.

since this control is inside the contentplaceholder its not accessible i think.

please suggest me how to access this div tag from javascript.

even i tried

JavaScript
var panel = document.getElementById('<%=ResMgmt.ClientID%>');

then also it is 'null'
Posted
Updated 14-Feb-12 23:11pm
v2

1 solution

JavaScript
onclick="ExpandOrCollapsePanel('<%=ResMgmt.ClientID%>');"

or another option is do view source and find out the genererated div id

like then use that id in the java script

[Edit]pre tag properly set[/Edit]
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900