How to call javascript function from different<div> ?

**acoder** · Oct 1 '08, 05:00 PM

Yes, just pass the ID as a parameter to the function:

Code:

function doToggle(id) {
            var cpe = $find(id);

PS. please use code tags when posting code.

**saadkhan** · Oct 1 '08, 05:23 PM

but how will i call it?
plz tell me this as well

**acoder** · Oct 1 '08, 08:13 PM

Pass the ID to the function when calling:

Code:

onclick="doToggle('cpe')"

**saadkhan** · Oct 2 '08, 03:37 AM

How to call single javascript function for different <div> tags?

I`v made the following code:

Code:

<div id="Panels" style="width: 28%;"> 
            <asp:Panel ID="one" runat="server" CssClass="Panel"> 
                <div id="Head" onclick="doToggle();"> 
                    HEADER 
                </div> 
            </asp:Panel> 
            <asp:Panel ID="two" runat="server" CssClass="Content"> 
                    abcdefghijklmnopqrstuvwxyz 
           </asp:Panel> 
            <cc1:CollapsiblePanelExtender ID="cpe" runat="server"  TargetControlID="two"></cc1:CollapsiblePanelExtender> 
</div>

and the function doToggle() is:

Code:

<script type="text/javascript"> 
        function doToggle() 
        { 
            var cpe = $find("cpe"); 

            if (cpe.get_Collapsed())  
            {    
                cpe._doOpen(); 
            }  
            else 
            { 
                cpe._doClose(); 
            } 
        } 
    </script>

Actually i want to use single 'CollapsiblePan elExtender' for many <div> tags, that is i just need to specify in function the targetId of div tags to act on everytime from where the function is called....

**Dormilich** · Oct 2 '08, 04:26 AM

if you use element.addEven tListener() / element.attachE vent() you can refer to the element's id with this.id

regards

**gits** · Oct 2 '08, 07:22 AM

threads merged - please don't double post threads and keep all questions regarding one issue in one thread.

kind regards
MOD

**acoder** · Oct 2 '08, 11:55 AM

If the previous answers don't help solve the problem, post the client-side version of your code, i.e. how it appears in the browser (view source).

PS. please use code tags when posting code.

PPS. don't use the report link when you only mean to reply. Reply is on the right.

**saadkhan** · Oct 3 '08, 12:35 PM

[HTML]<%@ Page Language="C#" AutoEventWireup ="true" CodeFile="Panel .aspx.cs" Inherits="Defau lt2" %>

<%@ Register assembly="AjaxC ontrolToolkit" namespace="Ajax ControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Welcom e</title>
<link href="UserStyle Sheet.css" rel="stylesheet " type="text/css" />

<script type="text/javascript">
function doToggle()
{
var cpe = $find("cpe");
cpe._animation. _fps = 30;
cpe._animation. _duration = 0.20;

if (cpe.get_Collap sed())
{
cpe._doOpen();
}
else
{
cpe._doClose();
}
}
</script>
</head>

<body>
<form id="form1" runat="server">


<asp:ScriptMana ger ID="ScriptManag er" runat="server">
</asp:ScriptManag er>


<div id="Panels" style="width: 28%;">

<div id="Head1" onclick="doTogg le();">
HEADER <asp:Label ID="lbl1" runat="server"> </asp:Label>
</div>
<asp:Panel ID="Panel1" runat="server" CssClass="Conte nt">
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.
</asp:Panel>



<div id="Head2" onclick="doTogg le();">
HEADER <asp:Label ID="lbl2" runat="server"> </asp:Label>
</div>
<asp:Panel ID="Panel2" runat="server" CssClass="Conte nt">
saadASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.
</asp:Panel>

</div>
<cc1:Collapsibl ePanelExtender ID="cpe" runat="server"
TargetControlID ="Panel1" CollapsedSize=" 0" SuppressPostBac k="True"
CollapsedText=" ↓" ExpandedText="↑ " TextLabelID="lb l"></cc1:Collapsible PanelExtender>


</form>
</body>

</html>[/HTML]

well heres my code, i want both div tags to call doToggle() onclick event which is working fine. But the target TargetControlID of CollapsiblePane lExtender remains same, which is causing only one div (Head1) to get slided.

**Rsmastermind** · Oct 3 '08, 12:55 PM

You can give same name to all divs.But different ids.Now call this function on onclick of every div as oncllick="doTog gle(this);" This is more than enough.Now you do not not need to call independant function for each div

Code:

function doToggle(that){

var divName=document.getElementsByName('Name of the div');
var divLength=divName.length;

for(i=0;i<divLength;i++)

	{

	if(divName[i].id==that){alert('Hi Friend');}
	else{alert('Bye Friend');}
	}
}

Hope this could be easy and efficient for you.

How to call javascript function from different<div> ?

How to call javascript function from different<div> ?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment