Solved

collapse and expand a div using java script

Posted on 2006-06-23
10
1,529 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
There are cases when e.g. an IT administrator wants to have full access and view into selected mailboxes on Exchange server, directly from his own email account in Outlook or Outlook Web Access. This proves useful when for example administrator want…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
Suggested Courses

617 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