Solved

collapse and expand a div using java script

Posted on 2006-06-23
10
1,520 Views
Last Modified: 2012-08-13
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="ExpandCollapsePanel(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="ExpandCollapsePanel(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.Visible = true;
    }



and here is the java script:


function ExpandCollapsePanel(expand)
{
  if (expand)
  {
      document.getElementById('collapse').style.display = 'none';
      document.getElementById('ctl00_plcMainContent_reportingSection').style.display = 'block';
      document.getElementById('expand').style.display = 'block';
  }
  else
  {
      document.getElementById('collapse').style.display = 'block';
      document.getElementById('ctl00_plcMainContent_reportingSection').style.display = 'none';
      document.getElementById('expand').style.display = 'none';
  }
}
0
Comment
Question by:jung1975
  • 4
  • 3
10 Comments
 
LVL 5

Expert Comment

by:Collindsouza
ID: 16969912
Hi jung,

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].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}

</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');">click me</a>

cheers
Collin
0
 
LVL 4

Expert Comment

by:recklez
ID: 16969913
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>&nbsp;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('reportingSection');
      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>
0
 

Author Comment

by:jung1975
ID: 16970565
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('reportingSection');
     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>&nbsp;Click to expand
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:recklez
ID: 16970942
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('reportingSection');
     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

0
 

Author Comment

by:jung1975
ID: 16970944
, 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="ExpandCollapsePanel(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="ExpandCollapsePanel(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('collapse').style.display = 'block';
      document.getElementById('ctl00_plcMainContent_reportingSection').style.display = 'none';
      document.getElementById('expand').style.display = 'none';
  }
  else
  {
      document.getElementById('collapse').style.display = 'none';
      document.getElementById('ctl00_plcMainContent_reportingSection').style.display = 'block';
      document.getElementById('expand').style.display = 'block';
  }
}
0
 
LVL 4

Expert Comment

by:recklez
ID: 16971051
<body onload="ExpandCollapsePanel(false);">
0
 

Author Comment

by:jung1975
ID: 16971092
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('reportingSection');
     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>&nbsp;Click to expand

            <div id="reportingSection" style="display: none;" runat="server">
                <fieldset style="width: 450px">
                    <legend>Ticket Created &nbsp;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>
                                &nbsp;</td>
                            <td style="vertical-align: bottom">
                                <asp:Button ID="btnClearStartDate" runat="server" Text="Clear" /></td>
                            <td>
                                &nbsp;</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>
                                &nbsp;</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>
                                &nbsp;</td>
                            <td>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td class="Label">
                                Status</td>
                            <td class="Label">
                                Priority</td>
                        </tr>
                        <tr>
                            <td>
                                </td>
                            <td>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                &nbsp;</td>
                        </tr>
                    </table>
                </fieldset>
            </div>
           
0
 
LVL 4

Accepted Solution

by:
recklez earned 500 total points
ID: 16971244
The problem is this line     <script type="text/javascript">>

Change it to    <script type="text/javascript">
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question