Solved

collapse and expand a div using java script

Posted on 2006-06-23
10
1,499 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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

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…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
This video discusses moving either the default database or any database to a new volume.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now