jung1975
asked on
collapse and expand a div using java script
I am tryiing to expland and collapse a div "reportingSection" by clicking (+) or (-) sign.but, It's not working as I expected. When the page got lodede the default shoud be (+) collapse and if I click (+) , the div will expand (-). Right now , it shows (-) when the page got loded, and if i click (-) it expands,but it doesn't collpse when I click again. I am not sure what I am doing wrong here
Here is my .aspx
<asp:PlaceHolder ID="plcExpandCollapsePanel " runat="server" Visible="false" EnableViewState="false">
<div id="expand" ><a href="#" onclick="ExpandCollapsePan el(true);" ><img src="~/Images/Collapse.gif " runat="server" style="margin-right: 5px;" />Change Search Criteria</a></div>
<div id="collapse" style="display: none;"><a href="#" onclick="ExpandCollapsePan el(false); "><img src="~/Images/Expand.gif" runat="server" style="margin-right: 5px;" />Change Search Criteria</a></div>
</asp:PlaceHolder>
<div id="reportingSection" style="display: none;" runat="server">
Here is code behind
protected void Page_Load(object sender, EventArgs e)
{
plcExpandCollapsePanel.Vis ible = true;
}
and here is the java script:
function ExpandCollapsePanel(expand )
{
if (expand)
{
document.getElementById('c ollapse'). style.disp lay = 'none';
document.getElementById('c tl00_plcMa inContent_ reportingS ection').s tyle.displ ay = 'block';
document.getElementById('e xpand').st yle.displa y = 'block';
}
else
{
document.getElementById('c ollapse'). style.disp lay = 'block';
document.getElementById('c tl00_plcMa inContent_ reportingS ection').s tyle.displ ay = 'none';
document.getElementById('e xpand').st yle.displa y = 'none';
}
}
Here is my .aspx
<asp:PlaceHolder ID="plcExpandCollapsePanel
<div id="expand" ><a href="#" onclick="ExpandCollapsePan
<div id="collapse" style="display: none;"><a href="#" onclick="ExpandCollapsePan
</asp:PlaceHolder>
<div id="reportingSection" style="display: none;" runat="server">
Here is code behind
protected void Page_Load(object sender, EventArgs e)
{
plcExpandCollapsePanel.Vis
}
and here is the java script:
function ExpandCollapsePanel(expand
{
if (expand)
{
document.getElementById('c
document.getElementById('c
document.getElementById('e
}
else
{
document.getElementById('c
document.getElementById('c
document.getElementById('e
}
}
Why are you using the placeholder? I think that is unnecessary. Anyhow, here is a working example.
HTML CODE:
<a href="#" onclick="javascript:toggle ()"><img src="~/Images/Expand.gif" id="toggler" border="0" /></a> Click to expand
<div id="reportingSection" style="display: none;">This is a test</div>
<script>
var imgExpand = new Image();
imgPlus.src = '~/Images/Expand.gif';
var imgCollapse = new Image();
imgMinus.src = '~/Images/Collapse.gif';
function toggle()
{
var e = document.getElementById('r eportingSe ction');
var i = document.images['toggler'] ;
e.style.display = (e.style.display=='block') ? 'none':'block';
i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;
}
</script>
HTML CODE:
<a href="#" onclick="javascript:toggle
<div id="reportingSection" style="display: none;">This is a test</div>
<script>
var imgExpand = new Image();
imgPlus.src = '~/Images/Expand.gif';
var imgCollapse = new Image();
imgMinus.src = '~/Images/Collapse.gif';
function toggle()
{
var e = document.getElementById('r
var i = document.images['toggler']
e.style.display = (e.style.display=='block')
i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;
}
</script>
ASKER
If I try your code I get java script error: object required..
<script type="text/javascript">>
var imgExpand = new Image();
imgPlus.src = '~/Images/Expand.gif';
var imgCollapse = new Image();
imgMinus.src = '~/Images/Collapse.gif';
function toggle()
{
var e = document.getElementById('r eportingSe ction');
var i = document.images['toggler'] ;
e.style.display = (e.style.display=='block') ? 'none':'block';
i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;
}
</script>
<a href="#" onclick="javascript:toggle ()"><img src="~/Images/Expand.gif" id="toggler" border="0" /></a> Click to expand
<script type="text/javascript">>
var imgExpand = new Image();
imgPlus.src = '~/Images/Expand.gif';
var imgCollapse = new Image();
imgMinus.src = '~/Images/Collapse.gif';
function toggle()
{
var e = document.getElementById('r
var i = document.images['toggler']
e.style.display = (e.style.display=='block')
i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;
}
</script>
<a href="#" onclick="javascript:toggle
I copied and pasted the script from a website I am working on and forgot to replace imgPlus and imgMinus with imgExpand and imgCollapse.
This should work.
<script type="text/javascript">>
var imgExpand = new Image();
imgExpand .src = '~/Images/Expand.gif';
var imgCollapse = new Image();
imgCollapse .src = '~/Images/Collapse.gif';
function toggle()
{
var e = document.getElementById('r eportingSe ction');
var i = document.images['toggler'] ;
e.style.display = (e.style.display=='block') ? 'none':'block';
i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;
}
</script>
Here is a link to see it in action.
http://64.81.216.226/toggle.html
This should work.
<script type="text/javascript">>
var imgExpand = new Image();
imgExpand .src = '~/Images/Expand.gif';
var imgCollapse = new Image();
imgCollapse .src = '~/Images/Collapse.gif';
function toggle()
{
var e = document.getElementById('r
var i = document.images['toggler']
e.style.display = (e.style.display=='block')
i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;
}
</script>
Here is a link to see it in action.
http://64.81.216.226/toggle.html
ASKER
, I made it to work using my current code somehow but..
the only problem is "Expand" is the default.., so when the page got loded or postback it shows the "Expand"mode. I would like to set"Collapse" as the default setting.. what do i need to change in my java script...
<asp:PlaceHolder ID="plcExpandCollapsePanel " runat="server" Visible="false" EnableViewState="false">
<div id="expand" ><a href="#" onclick="ExpandCollapsePan el(true);" ><img id="Img1" src="~/Images/Collapse.gif " runat="server" style="margin-right: 5px;" />Change Search Criteria</a></div>
<div id="collapse" style="display: none;"><a href="#" onclick="ExpandCollapsePan el(false); "><img id="Img2" src="~/Images/Expand.gif" runat="server" style="margin-right: 5px;" />Change Search Criteria</a></div>
</asp:PlaceHolder>
<div id="reportingSection" style="display: none;" runat="server">
function ExpandCollapsePanel(expand )
{
if (expand)
{
document.getElementById('c ollapse'). style.disp lay = 'block';
document.getElementById('c tl00_plcMa inContent_ reportingS ection').s tyle.displ ay = 'none';
document.getElementById('e xpand').st yle.displa y = 'none';
}
else
{
document.getElementById('c ollapse'). style.disp lay = 'none';
document.getElementById('c tl00_plcMa inContent_ reportingS ection').s tyle.displ ay = 'block';
document.getElementById('e xpand').st yle.displa y = 'block';
}
}
the only problem is "Expand" is the default.., so when the page got loded or postback it shows the "Expand"mode. I would like to set"Collapse" as the default setting.. what do i need to change in my java script...
<asp:PlaceHolder ID="plcExpandCollapsePanel
<div id="expand" ><a href="#" onclick="ExpandCollapsePan
<div id="collapse" style="display: none;"><a href="#" onclick="ExpandCollapsePan
</asp:PlaceHolder>
<div id="reportingSection" style="display: none;" runat="server">
function ExpandCollapsePanel(expand
{
if (expand)
{
document.getElementById('c
document.getElementById('c
document.getElementById('e
}
else
{
document.getElementById('c
document.getElementById('c
document.getElementById('e
}
}
<body onload="ExpandCollapsePane l(false);" >
ASKER
Still gettgin the syntax error
<script type="text/javascript">>
var imgExpand = new Image();
imgExpand .src = '~/Images/Expand.gif';
var imgCollapse = new Image();
imgCollapse .src = '~/Images/Collapse.gif';
function toggle()
{
var e = document.getElementById('r eportingSe ction');
var i = document.images['toggler'] ;
e.style.display = (e.style.display=='block') ? 'none':'block';
i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;
}
</script>
<div id="projectadministration" >
<a name="content_start" id="content_start"></a>
<fieldset>
<br />
<br />
<a href="#" onclick="javascript:toggle ()"><img src="~/Images/Expand.gif" id="toggler" border="0" /></a> Click to expand
<div id="reportingSection" style="display: none;" runat="server">
<fieldset style="width: 450px">
<legend>Ticket Created in the period</legend>
<table border="0" class="NonPrintable" style="width: 450px">
<tr>
<td class="Label" colspan="2" style="height: 31px">
From
<asp:Label ID="lblStartDate" runat="server"></asp:Label ><br />
</td>
<td class="Label" colspan="2" style="height: 31px">
To
<asp:Label ID="lblEndDate" runat="server"></asp:Label ><br />
</td>
</tr>
<tr>
<td>
</td>
<td style="vertical-align: bottom">
<asp:Button ID="btnClearStartDate" runat="server" Text="Clear" /></td>
<td>
</td>
<td style="vertical-align: bottom; width: 53px">
<asp:Button ID="btnClearEndDate" runat="server" Text="Clear" />
</td>
</tr>
</table>
</fieldset>
<br />
<br />
<fieldset style="margin-bottom: 20px; width: 450px">
<legend>Application and Features</legend>
<table border="0" class="NonPrintable" style="width: 450px">
<tr>
<td class="Label">
Application
</td>
<td class="Label">
<asp:Label ID="lblFeature" runat="server" Text="Feature"></asp:Label >
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</fieldset>
<br />
<br />
<fieldset style="margin-bottom: 20px; width: 450px">
<legend>Other ticket Properties</legend>
<table border="0" class="NonPrintable" style="width: 450px">
<tr>
<td class="Label">
Filed By</td>
<td class="Label">
Clinic</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td class="Label">
Status</td>
<td class="Label">
Priority</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</fieldset>
</div>
<script type="text/javascript">>
var imgExpand = new Image();
imgExpand .src = '~/Images/Expand.gif';
var imgCollapse = new Image();
imgCollapse .src = '~/Images/Collapse.gif';
function toggle()
{
var e = document.getElementById('r
var i = document.images['toggler']
e.style.display = (e.style.display=='block')
i.src = (i.src==imgExpand.src) ? imgCollapse.src : imgExpand.src;
}
</script>
<div id="projectadministration"
<a name="content_start" id="content_start"></a>
<fieldset>
<br />
<br />
<a href="#" onclick="javascript:toggle
<div id="reportingSection" style="display: none;" runat="server">
<fieldset style="width: 450px">
<legend>Ticket Created in the period</legend>
<table border="0" class="NonPrintable" style="width: 450px">
<tr>
<td class="Label" colspan="2" style="height: 31px">
From
<asp:Label ID="lblStartDate" runat="server"></asp:Label
</td>
<td class="Label" colspan="2" style="height: 31px">
To
<asp:Label ID="lblEndDate" runat="server"></asp:Label
</td>
</tr>
<tr>
<td>
</td>
<td style="vertical-align: bottom">
<asp:Button ID="btnClearStartDate" runat="server" Text="Clear" /></td>
<td>
</td>
<td style="vertical-align: bottom; width: 53px">
<asp:Button ID="btnClearEndDate" runat="server" Text="Clear" />
</td>
</tr>
</table>
</fieldset>
<br />
<br />
<fieldset style="margin-bottom: 20px; width: 450px">
<legend>Application and Features</legend>
<table border="0" class="NonPrintable" style="width: 450px">
<tr>
<td class="Label">
Application
</td>
<td class="Label">
<asp:Label ID="lblFeature" runat="server" Text="Feature"></asp:Label
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</fieldset>
<br />
<br />
<fieldset style="margin-bottom: 20px; width: 450px">
<legend>Other ticket Properties</legend>
<table border="0" class="NonPrintable" style="width: 450px">
<tr>
<td class="Label">
Filed By</td>
<td class="Label">
Clinic</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td class="Label">
Status</td>
<td class="Label">
Priority</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</fieldset>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ihere is a very Basic and simple example of show/ hide div
Copy the code in a new page and try integrating it with your current code.. and see if it works
Try this function - best ive found and its good cross browser compatibility:
<!-- in HEAD of document -->
<script language="javascript">
var state = 'hidden';
function showhide(layer_ref) {
if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref]
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(la
maxwell_smart.style.visibi
}
}
</script>
<!-- in BODY of document -->
<div id="agent99" style="position:absolute; top:103px; left:153px;
visibility:hidden;">
your stuff to show here
</div>
<!-- CLICK LINK TO SHOW LAYER -->
<a href="javascript://" onclick="showhide('agent99
cheers
Collin