Solved

collapse and expand a div using java script

Posted on 2006-06-23
10
1,510 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
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

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…
One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

773 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